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.

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.


2 Comments

  1. 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

    Reply
  2. lingmaaki

    More CSS image hover samples….Image Hover

    Ling

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *