100
Lost something?
Who writes here?

Arian Simon

Web Designer - Business Owner - Entrepreneur who makes happy little mistakes.

Read more about me

BLOG POST

Cool Image Hover Effects For Your Website

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:

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:

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:

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.

Image Hover Effect 2 – Greyscale

image hover effect 5

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

Image Hover Effect 3 – Brighten

image hover effect 4

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

Image Hover Effect 4 – Highlight

image hover effect 2

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

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).

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest