0Hello everyone let's see how to make an awesome rotating image on hover with HTML 5.0 and CSS 3.0.
STEP 1: In HTML code put an image with the HTML tag
STEP 2: Style that image however you want. Below I am going to show you the CSS code for the image.
#myimg{
width:100px; //comment - this is style the size(width property) as for our need in the website
height:100px; //comment - same as width we are managing the height of the image as well
transition: all 1s ease; // comment - it allows you to change the property calue smoothly (in this casse, on hover and after hover)
}
STEP 3: Now we will add the hover effect for the image. Hover effect is the effect when the user puts the mouse(not clicks) on that particular area(here image) is called HoverOver effect and when the user takes the the mouse out is called HoverOut. So lets create the hover effect for the image.
#myimg:hover{
// comment :hover type is called the pseudo field which is like specifying the effect or property on the parent field/area
transform: rotate(360deg); // comment - it will rotate the image by 360 degree. as above we have given the transition time of 1sec it will rotate 360 deg in the given time.
}
And that's it. Lets put the whole code without comments below.
<!doctype html>
put the head tags and include the css file reference here
CSS file:
#myimg{
width:100px;
height:100px;
transition: all 1s ease;
}
#myimg:hover{
transform: rotate(360deg);
}
If you have any doubts in the above code please feel free to contact me through urbanpro
