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
It is a visual effect when one picture replaces the other when the user hovers over it with the pointer.
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.
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
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.
Leave a Reply
You must be logged in to post a comment.