How to Create a Rollover Image Effect

Table of Contents


What you’ll need

To create a rollover effect on your images you are not supposed to have some special skills. In this short instruction, we’ll figure out how it is accomplished.

First of all, you will need two pictures of the same dimensions. You can use Photoshop or another graphics editor for this purpose. Please note, that the images’ size should be optimized, if you want the pages to be loaded quickly.


By the way, we have launched a new subscription service which is called ONE. ONE by TemplateMonster offers you an amazing opportunity to get the best templates, themes, plugins, etc. for just $19 a month! All that you need to do is to subscribe for ONE and enjoy the variety of unlimited items from ONE package. No limits and no restrictions! Follow the link HTML Templates to find out which items are in the pack. Do you want to save even more money while subscribing? Then you should be a MonsterPost reader. These lucky ones can get a grand 5% discount with the promo code BecomeThe1.


The ways to create the effect

There are several ways to create the rollover effect on your images on a web page. You can make it using Javascript, or just CSS, or HTML only.


HTML-based method

If you choose to use HTML only, you will not be able to add a transition. But if you have the right circumstances where you do not need the transition, you can choose the following way. Here is an example of HTML code with a rollover:

where:

  • ‘src’ attribute declares the original image
  • ‘onmouseover’ event indicates the image which is shown when you hover the original one
  • ‘onmouseout’ event features the image displayed after the hover image is not already active (i.e when the pointer is taken away from it)

As you see, this way is quite easy, but even so, it has no means to make the rollover effect smooth.


CSS-based method

The second way describes the rollover effect performed using styles:

This process is also rather easy. The background image of the block is changed while hovering but the smooth transition makes it more attractive, doesn’t it?

The same techniques are used for creating the overlay effects in TemplateMonster website templates.


JS-based method

And the third method to show you as an example is built using the script:

Not as simple as the two previous ones, but it also works 🙂


My choice

From my perspective, I’d prefer to use the CSS method; it’s as simple as it is reliable. Moreover, as a former developer, I would say everything that can be done with CSS, should be done with CSS!

Leave your comments if you do not agree with this, and if you do - just rate this post with as many stars as you can 😉


Read Also

Ninja CSS Contact Form – Free WordPress Plugin

10 Less-Known CSS Techniques for your WordPress Site

CSS3 Cheat Sheet for Dummies Learning to Code

How to Get Out of the Coding Trap with CSS Viewers: Must-Read for Slowpokes

CSS Grid: The New Way of Building Web Layouts