Today’s tutorial will concentrate on image hover effects. These effects can easily grab your visitors’ attention. Use them wisely and don’t overload your site. Else you will scare readers away. Your site should still be comfortable to use.

The Basics of Image Hover Effects

In css hover effects are created with the :hover selector. You append this selector to your css elements in your css file (styles.css for WordPress). If you need a short reminder of css you can read this post. A typical css image hover effect looks like this:

img:hover {
/* your hover style here */
}

Inside you can determine how the element should behave. The element’s properties states get activated as soon as a user hovers over the image. The switch between hover and non-hover states will be instant. If you want to smooth out the transition you can use the transition property for your image element:

img {
-webkit-transition: all 1s;
transition: all 1s;
}

Different browsers have different property declarations. For example the -webkit property is used by older Safari browsers. If your target audience is using older browser versions you want to include -moz, -o and -ms too. Always go from specific browser properties to the general property “transition” like this:

-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;

The all state declares that all transition effects are changed by this line. The 1s stands for 1 second and determines the transition time.
Therefore above command declares that the transition duration for all transitions is 1 second.

Five Easy Image Hover Effects

5 simple image hover effects you can steal and use right now. Just hover over the sample images to see their effect.

Image Hover Effect 1- Flip

image hover effect 1

This image hover effect provides a fancy flip. Great to grab your visitors attention for a few seconds. Low usability.
Use the following code to achieve it.

img{
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
img:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

Image Hover Effect 2 – Greyscale

image hover effect 5

A beautiful effect for photos. Turn them black and white on hover. Decent usability.

img{
-webkit-transition: all 1s;
transition: all 1s;
}
img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Image Hover Effect 3 – Brighten

image hover effect 4

A sweet little brighten effect. Great usability but don’t turn it too high.

img{
-webkit-transition: all 1s;
transition: all 1s;
}
img:hover{
-webkit-filter: brightness(125%);
filter: brightness(125%);
}

Image Hover Effect 4 – Highlight

image hover effect 2

A simple effect that highlights the image which is hovered by the user. Great usability.

img{
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
img:hover{
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,204,255,1);
box-shadow: 0px 0px 30px 0px rgba(0,204,255,1);
}

Image Hover Effect 5 – Zoom

image hover effect 3

A very fancy zoom effect. Offers great style for product displays. Great usability if used wisely. It’s a bit more tricky to create however. You need to encapsulate your image within a div (with the class “imgdiv” in this example).

.imgdiv{
width:200px;
height:200px;
overflow:hidden;
}
img{
width:200px;
height:200px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
img:hover{
width:220px;
height:220px;
}

Other Tutorials With Great Image Hover Effects

There are also other great tutorials on this topic. They also provide easy to copy examples and I highly recommend them. Here is the list:

Conclusion

While image hover effects are beautiful to look at you shouldn’t overdo them. The more fancy the more distracting they are. However if you use them carefully they can really spice up your website.

Cheers,
Arian