Image cross fade on hover using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
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.

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.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

Related Designs and Schematics

The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

2 Comments on "Image cross fade on hover using CSS and HTML"

Notify of
avatar
Sort by:   newest | oldest | most voted
Mark Stewart
Guest

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

lingmaaki
Guest

More CSS image hover samples….Image Hover

Ling

wpDiscuz