Description: Easy way to create rollover image effect in your Blogger blog. Change images to secondary images on Mouseover using CSS3.
Changing image on mouseover is used to make your site more attractive for your readers. You have to use two images for creating a rollover image. The image you are normally display on your blogs, let it says primary image. Now, we want another image that will be display when a user hover the mouse on the primary image, let it says secondary image. Basically a rollover image is a secondary image that can be view by hovering your mouse on the primary image. When a page loads, all the secondary images using in the document will be loaded completely so when you hover your mouse on the primary image, you'll view roll over image instantly without further loading. You can use two different images or slightly different images change in colors only (used for social media share buttons) for creating rollover image effect. You can also use rollover image effect to show the price of the product as secondary image, and the product image as primary image.
Checkout the live demo by the following image. Hover your mouse on the following image to view secondary image.
More Blogger Tips:
You can paste this code to your Blogger sidebar, footer widget or in your post editor under 'HTML' tab. Make sure to change the 'src' attribute with the direct link of your images. While uploading image in your Blogger post editor go to 'HTML' tag and you can manually add 'onmouseover' and 'onmouseout' attribute to take rollover effect.
To display rollover image effect in Blogger sidebar widget, go to Blogger dashboard -> Select your blog -> Layout -> Add a Gadget -> Select 'HTML/JavaScript', and paste above code. Finally, hit on 'Save' button.
In 'href' attribute place the link where you want to redirect your visitors when they click on the rollover image. If you want your visitors to redirect to the destination path in a new tab, you have to use 'target' attribute as mention in the above code otherwise you can leave it.
Checkout the live demo by the following image. Hover your mouse on the following image to view secondary image.
- Show YouTube Videos in Blogger with Responsive Code
- Show PDF & another Document Files in Blogger with Responsive Code
- Responsive Social Media Share Button for Blogger: Faster Loading
- Facebook Responsive Fanpage Like Button Widget for Blogger
Create Rollover Image Effect | Change Image on Mouseover using CSS
If you have a blog or website, you'll be familiar with displaying images on your blog using HTML tag which is similar as the rollover image effect. We'll just add two more attributes in our img tag 'onmouseover' and 'onmouseout' to change image on mouseover.Making Rollover Image Effect
Copy the following code,<img src="Main Image URL showing as default" onmouseover="this.src='URL of your secondary image'" onmouseout="this.src='Main Image URL showing as default'"/>You can paste this code to your Blogger sidebar, footer widget or in your post editor under 'HTML' tab. Make sure to change the 'src' attribute with the direct link of your images. While uploading image in your Blogger post editor go to 'HTML' tag and you can manually add 'onmouseover' and 'onmouseout' attribute to take rollover effect.
To display rollover image effect in Blogger sidebar widget, go to Blogger dashboard -> Select your blog -> Layout -> Add a Gadget -> Select 'HTML/JavaScript', and paste above code. Finally, hit on 'Save' button.
Create Clickable Rollover Image Effect in Blogger
If you want to display your rollover image with additional features like clickable link over images, you just need to wrap your 'img' tag with 'a' tag. Look on the following code.<a href='URL of Destination Path' target='_blank'><img src="Main Image URL showing as default" onmouseover="this.src='URL of your secondary image'" onmouseout="this.src='Main Image URL showing as default'"/></a>In 'href' attribute place the link where you want to redirect your visitors when they click on the rollover image. If you want your visitors to redirect to the destination path in a new tab, you have to use 'target' attribute as mention in the above code otherwise you can leave it.
