Today we learn some simple CSS Image Hover Effects. we created some simple examples that will work in all browsers. Its very short and sweet tutorial so you can understand it even if you never touched CSS before.
For Image hover effect we use CSS :hover Selector. The :hover selector is used to select elements when you mouse over them. we learn below four Image Hover Effects in this tutorial :
In this example we have :hover using height and width to change the size of the image, by adding transition: all 1s ease; to img we make that change from bigger- to smaller look smooth, changing the 1s to 1,1s will make the transition last longer and setting it to 0,9s will make it last shorter.
HTML
in this we created two classes enlarge & normal now we write css for each class. normal class is for normal sate of image & when you keep mouse over image the code inside enlarge class will run.
CSS
Note : webkit & moz are CSS browser prefixes we need to add the prefix below for each browser
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
function scale() change image size. in this we increase size by 0.1 ( actual size is 1.0)
HTML :
we are using same HTML code just add new class shrink
CSS :
HTML :
CSS :
HTML :
CSS :
For Image hover effect we use CSS :hover Selector. The :hover selector is used to select elements when you mouse over them. we learn below four Image Hover Effects in this tutorial :
In this example we have :hover using height and width to change the size of the image, by adding transition: all 1s ease; to img we make that change from bigger- to smaller look smooth, changing the 1s to 1,1s will make the transition last longer and setting it to 0,9s will make it last shorter.
Enlarge Image on hover : In this example we change the size of image to bigger from smaller. To achieved this we add transform:scale(1.1); on img:hover, we can make it smooth by adding transition: all 1s ease; to img
HTML
in this we created two classes enlarge & normal now we write css for each class. normal class is for normal sate of image & when you keep mouse over image the code inside enlarge class will run.
CSS
Note : webkit & moz are CSS browser prefixes we need to add the prefix below for each browser
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
function scale() change image size. in this we increase size by 0.1 ( actual size is 1.0)
Shrink Image on hover : In this example we just Shrink image on hover by adding transform:scale(0.8); it reduce image size by 0.2
HTML :
we are using same HTML code just add new class shrink
CSS :
Rotate Image on hover : in this example we use transition again on hover but instead of scale we use rotate(360deg); which rotate image by 360 degree
HTML :
CSS :
Tilt Image on hover : In this example instead rotate image by 360 degree we changed it to 15 degrees so it just tilts a little bit.
HTML :
CSS :
0 comments:
Post a Comment