Methods to change image on hover

Image rollover is a effect of changing certain image when a visitor hover (put mouse arrow over it) on it. The image of a certain element can be changed using two methods, One is using CSS background property and the other one is using img mouseover and mouseout tags. Both the methods are easy and can enhance your blog styling. The only difference in between these method is that CSS method transform background image where as another one can be used to transform any image.

How to change image on hover using CSS effect ?

Step1:  Add <div class="ltimg"> where ever you want image to appear in your html.

Step2: Now add below CSS codes to your template.

.ltimg {
    background-image: url("Initial image URL");
    height:400px;
    width:600px;
}
.ltimg:hover {
      background-image: url('image URL to show on hover');
}

Change blue color values to change the size of the image.

How to change image when someone hover on it using basic html img tags?

Replace your basic image tag html which looks something like this

<img src="Initial image URL"/>

with these codes

  <img src="Initial image URL"  onmouseover="this.src='image URL to show on hover'" onmouseout="this.src='Initial image URL'" / >