Simple & Cool Live Examples of Image hover Css effect
We will be playing with Image on hover effects using CSS and One image only. I’ve created four simple examples that will work in all browsers and another six cooler ones that will work only on webkit browsers.
They are all hosted on Codepen so you can directly play with the code and learn in the process. I didn’t even make any extra div to confuse you – all the images are in their main IMG tag. I’ll try to keep it short and sweet so you can absorb it even if you never touched CSS before.
In all the examples below we use this two simple things :
For CSS
img {here is the code of the initial state of the image}
and
img:hover { here is the code of the hover state of the image}
For HTML
<img src="http://link to the image">
This extra div below ↓ is used to center things on the Screen JUST IGNORE IT
<div style="text-align:center">
The first four live examples will work in all the modern browsers
Lets get this party started…
Shrink Image on hover
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 just change the height and width to be bigger rather than smaller. Compare the css with the first example above and you will understand what i mean.
Rotate Image on hover
In this example we have transition again but this time in :hover instead of the image size we have transform: rotate(360deg); which does exactly what it says – it rotates the image 360 degrees.
Tilt Image on hover
In this example the 360 is changed to 15 degrees so it just tilts a little bit.
Now for the webkit browsers the effects are much more interesting, yet also very simple to create
Blur Image on hover
Again in the img we use the transition but this time in the :hover we have added a filter -webkit-filter: blur(5px); changing the 5px to more or less will change the blur strength.
Decolorize Image on hover
This time the filter is -webkit-filter: grayscale(100%); again setting the 100% to less will change the effect
Darken Image on hover
Here we have -webkit-filter: brightness(100%); in img again as initial state and than by adding -webkit-filter: brightness(0%); to :hover we trigger the change. and of course again you can set up the filters % to your needs.
Hue-rotate Image on hover
In this cool example we have added the filter -webkit-filter: hue-rotate(333deg);
Drop shadow Image hover css effect
For drop shadow we use -webkit-filter: drop-shadow(10px 7px 1px grey)
Opacity Image hover css effect
In this last example we have -webkit-filter: opacity(0.3); as a filter.
And that concludes my Image on hover Css effect article.
I suggest that you bookmark this page and use it as a starting point anytime you wish to practice and experiment.
You can also check some other cool stuff that i have about CSS.
If you like those image hover Css effects please be kind to share it on your favorite social networks below.
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.
Web Design Skills
I enjoy building websites on WordPress platform but i can work on any other platforms as well.
SEO Skills
I enjoy working with Google and Yahoo SE.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
- WordPress Site Administration Service – Why do you need it? - 8. February 2017.
- The best way to add custom functions to wordpress - 9. December 2016.
- Paper Text Area Created with CSS only – Editable Example - 9. July 2015.
This is brilliant – thank you so much. As a non code expert / developer it was really easy to follow. I notice from one of the other comments I am not the only one looking for a darkening effect with a text link on top. I am still exploring how to do this. Your code has been super helpful. Only thing I need to resolve is the text element is also fading, but perhaps… Read more »
nice hover effect very useful
wow! Awesome effects thanks
Great work! I was looking for image hover effect for my new website, and it really helped.
How do I get text over images with a hover effect?
Thanks in advance.
Great. Thank you, Nikola.
I’m using firefox, I can’t get anything past the tilt-image to work..?
awosame effects………..!!!!!
Hi thanks for the tutorial,
But how do i get the rotate effect to work on just one image rather then all of them?
Thanks!
.N {
height: 150px;
width: 160px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.N:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(3600deg);
-o-transform: rotate(3600deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Then ive your img,
so without the brackets it will look like this
img src=”/img/5.jpg” class=”N”
For shrinking/enlarging you could also use: transform(scale(2,2)) for example… better if you don’t know the image sizes but not as cross-browser friendly I suppose.