Image cross fade on hover using CSS and HTML

Salena gomez image hover crossfading effect

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.



        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
        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.


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

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.

The following two tabs change content below.
Frank Donald
Frank Donald is an Electronics and Communication Engineer who loves building stuff in his free time. Video games, blogging and programming are the things he loves most
Frank Donald

Latest posts by Frank Donald (see all)

Ask your query

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
Mark Stewartlingmaaki Recent comment authors
newest oldest most voted
Notify of
Mark Stewart
Mark Stewart

Thanks for that. I have been looking for this effect for a while now and yours was the easiest to follow. I have one question. I am using your fade effect in a flexbox grid with 3 images across and I want to use your effect on the 1st and 3rd images. However the image appearing on hover over is too big and you only see a portion of it. What would the css be to make it fit


More CSS image hover samples….Image Hover