00 days
:
00 hours
:
00 minutes
:
00 seconds

How to Create a Rollover Image Effect

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 😉


FAQ

What is a rollover image effect?

It is a visual effect when one picture replaces the other when the user hovers over it with the pointer.

What this effect is used for?

The Rollover effect is great for showing some information useful for the user. For example, it can show the price of an object when the user pays attention to it.

Do I need some specialized software to create a rollover image effect?

No, by the time you would like to create such an effect you will possess all the instruments you need for creating it.


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


Helen Marshall

Helen is a Technical Writer at TemplateMonster, passionate about WordPress and creating chatbots. Follow her on Quora.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

44 responses to “How to Create a Rollover Image Effect”

  1. android quality instagram featured download

  2. Viagra says:

    Viagra Te Hace Durar Mas

  3. Λήψη κυλίνδρων για το instagram android

  4. download della storia di macbook insta

  5. Good Post. I like your blog. Thanks for Sharing

  6. Bob says:

    THIS WEBSITE IS EPIC!

  7. Bob says:

    Absolutely smashing!

  8. ERIC K GORDON says:

    I have a picture frame hobby with different frame styles. I am working on my site.
    How can I take a picture, not in a wooden picture frame (base image) and do a roller over like above but when you roll over each of the individual frames that I use. Like if I have a silver picture frame available, black, and natural wood frame? I want people to get an idea of what it would look like in those frames.
    I hope that makes sense.

  9. Bathrobe says:

    I have one question: What can I use for touchscreen devices?

  10. Bathrobe says:

    I have only one comment. In order to make your examples easier to follow, wouldn’t it be better to use easy to follow image names, like “image1” and “image2”, rather than “5097608B-1DD8-B71B-0BB1933DB95CC94C/5097608B-1DD8-B71B-0BB1933DB95CC94C”?

  11. Erika says:

    The HTML version is so easy and simple that I don’t want to even mess around with the other options. However, I feel like the CSS/JS options are ‘better.’

  12. AnanyaAWS says:

    Interesting Update, Thank you..!

    Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

  13. Ed Newbold says:

    I really like the HTML version. Is there a way to have it work on two different size images, like a small one that, upon mouseover it shows the larger versioin, then upon mousexit reverts back to the smaller one. =Thanks much=

  14. Carol says:

    I was looking at this for options on doing these in css. On my machine, your javascript method isn’t working. The CSS and HTML options work fine, though.

  15. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site

Leave a Reply

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