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.
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:
As you see, this way is quite easy, but even so, it has no means to make the rollover effect smooth.
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.
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 🙂
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 😉
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.
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
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.