On mouse over image change effect for Blogger

Adding effective and Eye-catching image to blogs attracts visitors/readers to stay on blogs. Here, BlogTariff presents wonderful technique trick "How to change on mouse over image change". We already discussed about on mouse over change techniques for blog now in this tutorial BlogTariff educate you for adding "On mouse over image change" for blogger. Thsi trick is based on CSS coding and you don't need to work hard just add this code with simple following methods as given below. Let's begin the tutorial to add code in easy two steps.

FOR DEMO "JUST MOUSE OVER ON IMAGE"

Step 1: How to "Add On mouse over image change" for blogger?

Sign into your blogger account
Click on "EDIT HTML" link tab
Now search for code

]]></b:skin>

After finding the code copy the below code and paste above to it

.image-hover {
display:block;
background-image:url(http://first_image_url.jpg);
width:100px;
height:100px;
}
.image-hover:hover {
background-image:url(http://second_image_url.jpg);
}

Step 2:
After pasting the above code now select the area wherever you want to display "on mouse over" image i.e readmore or below post or above post or below post title.
Note: Before you execute this method, the class name used in both the HTML and CSS part should be the same as below.

<a class='image-hover'></a>

The area you've selected must have two images to appear first and on mouse over image second as below code

<img src='http://first_image_url.jpg' onmouseover="this.src='http://second_image_url.jpg'" onmouseout="this.src='first_image_url.jpg'"/>

Customization:

• Replace "First image url" with your starting image to appear
• Replace "Second image url" with your on mouse effect image to appear

After successful modifications now, Save the widget or post or Template and preview.

Appreciation

If you enjoyed this article and we helped you little bit let know your views and suggestions via comments. We always appreciate by Subscribing to US - Don't miss ensuing posts.