Simple & Cool Live Examples of Image hover Css effect

Home » css examples » Simple & Cool Live Examples of Image hover Css effect

Simple & Cool Live Examples of Image hover Css effect

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

box shadow browser support 

Lets get this party started…

Simple & Cool Live Examples of Image on hover Css effect

 

Check out this Pen!

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.

 

Check out this Pen!

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.

 

Check out this Pen!

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.

Check out this Pen!

Tilt Image on hover

In this example the  360 is changed to 15 degrees so it just tilts a little bit.

Simple & Cool Live Examples of Image on hover Css effect

 

Now for the webkit browsers the effects are much more interesting, yet also very simple to create

Check out this Pen!

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.

Check out this Pen!

Decolorize Image on hover

This time the filter is  -webkit-filter: grayscale(100%); again setting the 100% to less will change the effect

Check out this Pen!

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.

Check out this Pen!

Hue-rotate Image on hover

In this cool example we have added the filter -webkit-filter: hue-rotate(333deg); 

 

 

Check out this Pen!

Drop shadow Image hover css effect

For drop shadow we use -webkit-filter: drop-shadow(10px 7px 1px grey)

Check out this Pen!

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.

Nikola fivera Petrovic
Get in Touch

Nikola fivera Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.

Web Design Skills

I have been into web design for the last 10+ years.
After working for various agencies and companies I have decided to take a lone wolf path as a Freelancer but I still actively collaborate with agencies across the globe.
I enjoy building websites on WordPress platform but i can work on any other platforms as well.

SEO Skills

I have spent a last couple of years as an SEO executive and SEO consultant working on 4 continents.
Specialized in on-page SEO I wear a pointy Google-Wizard White-Hat and help various small and medium-sized businesses rank well in the search engines.
I enjoy working with Google and Yahoo SE.
Feel free to request a free meeting bellow.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
Nikola fivera Petrovic
Get in Touch
2017-04-16T04:15:09+00:00

Leave a Reply

14 Comments on "Simple & Cool Live Examples of Image hover Css effect"

Notify of
avatar
Sort by:   newest | oldest | most voted
jobsninty
Guest

nice hover effect very useful

Sachin
Guest

wow! Awesome effects thanks

Rahul Nambier
Guest

Great work! I was looking for image hover effect for my new website, and it really helped.

Anders
Guest

How do I get text over images with a hover effect?
Thanks in advance.

Lily G.
Guest

Great. Thank you, Nikola.

Dawson
Guest

I’m using firefox, I can’t get anything past the tilt-image to work..?

Usama
Guest

awosame effects………..!!!!!

Natalie
Guest

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!

Christian
Guest
.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); }
Christian
Guest

Then ive your img,
so without the brackets it will look like this
img src=”/img/5.jpg” class=”N”

Bryce
Guest

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.

kharen
Guest

Hello, could it be possible to show the caption when hover? but darken the image? thanks!

wpDiscuz