Image Rotation When Mouse Hovered Using CSS3

By Sidharth Patnaik -
This post is all about a simple code snippet using the combination of the CSS3 and HTML which rotates an image at a certain degree when mouse is hovered on it ! This add-on piece of code make your web-page look more trendy.

Screenshots[Demo]:
 


The complete code is divided into two parts, the css and the HTML
The CSS part: 
.hovrot {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  border-width: 2px;
  border-color: #594c2d;
  border-style: double;
  height:200px;
  width:200px;

}
 
.hovrot:hover {
  -webkit-transform: rotate(25deg);
     -moz-transform: rotate(25deg);
       -o-transform: rotate(25deg);
      -ms-transform: rotate(25deg);
          transform: rotate(25deg);
    color: #000000;
}

The HTML part: 
<img src="img.jpg" class='hovrot' alt='This is a simple Image'/>
<b style="position: relative;top: -100px;padding:10 10;"> When Hovered -----> </b>
<img src="img.jpg" class='hovrot' alt='This is another simple Image'/>

The Complete Code: 
<b><i>Image Rotation when hovered-</i></b><br />
<br />
<style>
.hovrot {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  border-width: 2px;
  border-color: #594c2d;
  border-style: double;
  height:200px;
  width:200px;

}
 
.hovrot:hover {
  -webkit-transform: rotate(25deg);
     -moz-transform: rotate(25deg);
       -o-transform: rotate(25deg);
      -ms-transform: rotate(25deg);
          transform: rotate(25deg);
    color: #000000;
}
</style>

<br />
<center>
<img src="img.jpg" class='hovrot' alt='This is a simple Image'/>
<b style="position: relative;top: -100px;padding:10 10;"> When Hovered -----> </b>
<img src="img.jpg" class='hovrot' alt='This is another simple Image'/>
</center>

Found Bugs, Report us, We will be glad to fix them all ! :)

Comments

Post a Comment

Popular posts from this blog

Non Restoring Division Algorithm Implementation in C

By Sidharth Patnaik -
Image
This  is a Dynamic program for the implementation of the NON RESTORING Division Algorithm in C Language. Non Restoring Division uses Left Shift Operations, Twos' Compliment and Binary Addition. Screenshots[Demo] The Code #include<stdio.h> #include<malloc.h> int *a,*q,*m,*mc,*c,n,d; int powr(int x,int y) { int s=1,i; for(i=0;i<y;i++) s=s*x; return s; } void print(int arr[],int n) { int i; for(i=0;i<n;i++) printf("%d ",arr[i]); } void bin(int n, int arr[]){ int r, i = 0; do{ r = n % 2; n /= 2; arr[i] = r; i++; }while(n > 0); } void set(int array[], int x){ int i,tmp[20]={0}; for(i = x -1; i >=0; i--) tmp[x-1-i]=array[i]; for(i=0;i<x;i++) array[i]=tmp[i]; } int len(int x) { int i=0; while(powr(2,i)<=x) i++; return ++i; } void addBinary(int a1[], int a2[]) { int bi[2]={0},ca[20]={0}; int t=len(n),tmp=0; int *su=(int*)malloc(sizeof(int)*len(n)); while(t...
Read more

Hackerrank String Reduction Solution

By Sidharth Patnaik -
Image
This is the solution to the program, solved in python. The Question can be found in the Algorithm domain of Hackerrank. Problem Statement: Given a string consisting of letters, a, b and c, we can perform the following operation: Take any two adjacent distinct characters and replace them with the third character. For example, if 'a' and 'c' are adjacent, they can replaced by 'b'. Find the smallest string which we can obtain by applying this operation repeatedly? Screenshots[Demo] The Code: def cnt(x): m={} m['a']=0;m['b']=0;m['c']=0 for c in x: if c not in m: m[c]=1 else: m[c]+=1 return m def red(x): xm=cnt(x) print x,xm if((xm['a']==0 and xm['b']==0 ) or (xm['a']==0 and xm['c']==0 ) or (xm['b']==0 and xm['c']==0)): return len(x); if((xm['a']%2==0 and xm['b']%2==0 and xm['c']%2==0) or (...
Read more

Hackerrank Modified Kaprekar Numbers Solution

By Sidharth Patnaik -
Image
This is the solution to the Modified Kaprekar Numbers found in the implementation section of the algorithm domain in Hackerrank. A modified Kaprekar number is a positive whole number n with d digits, such that when we split its square into two pieces - a right hand piece r with d digits and a left hand piece l that contains the remaining d or d−1 digits, the sum of the pieces is equal to the original number (i.e. l + r = n) . Screenshot The Code def sendKap(x,s): y=x*x y=str(y) s1=y[:len(y)/2:] s2=y[len(y)/2::] s3=int(s1)+int(s2) if(s3==x): s.append(str(x)) st=input() en=input() s=[] for i in range(st,en+1): if(i>9): sendKap(i,s) elif(i==1): s.append(str(i)) elif(i==9): s.append(str(i)) if(len(s)==0): print 'INVALID RANGE' else: print ' '.join(s) Got any problems feel free to comment them here !
Read more