Image cross fade on hover using CSS and HTML

Image cross fade on hover can be done through simple CSS codes and it plays a unique role in displaying images in a website as a gallery or may be as a sideshow.This post is about to teach you how to display another image when you hover the mouse over that image.There are several techniques to implement this hover effect and this post deals in implementing the hover effect using Opacity property of the CSS.Opacity property in CSS was used to define the opaqueness of any object the value ranges from 0 to 1 and it can be given as decimal values too.

VIEW DEMO

CSS CODE:

.bord{
        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
         }
.crossfd{
        background: url("Your second image URL here");
        display: inline-block;
        font:size: 0;
             }
.crossfd img{
                 -webkit-transition: opacity 1s ease-in-out;
                 -moz-transition: opacity 1s ease-in-out;
                 -o-transition: opacity 1s ease-in-out;
                 transition: opacity 1s ease-in-out;
                    }
.crossfd img:hover{
                    opacity: 0;
                               }

In the above CSS code you can see in line “7” the second image that is to be displayed when hovered was defined as background of the original image in line 18 the opacity of the original image was set to 0 when the image was hovered this results in 100% transperancy of the original image and then the background image will be displayed.Thus overall it will look like a hovering effect.

HTML CODE:

<div class="bord crossfd">
<img src="Your orginal image URL here"></img>
</div>

In the HTML part the orginal image source was placed in the <div> tag with class of “bord crossfd” and thus it enables the image to take up the property of these two CSS classes.By this way you can implement crossfading of images or display another image over an image when mouse hovers.