Image caption hover effect using HTML and CSS

Image caption hover effect

First let me explain what is the Image caption hover effect whenever mouse pointer is hovered on the image we can see the caption effect on the image.

lets start creating Image caption hover effect step by step

Consider the three div elements, create the first div element with id:wrapper and second div element with class:image-container inside the wrapper div and put the image and one more div element with class:image-caption inside the image-container div and below the image.

Image caption hover effect

  1. Add the CSS to wrapper div and give the margin:auto; to make the content float within the center of the browser. and give overflow:hidden; to make the rest of the content lie within the given height.
    #wrapper{
                padding:0px;
                width:820px;
                height:auto;
                margin:auto;
                overflow:hidden;
    }
  2. Add the CSS to image-container div and give the position:relative; and float:left; to make the images align to left.
    .image-container{
                float:left;
                width:250px;
                height:200px;
                position:relative;
                margin:10px;
                cursor:pointer;
    }
    
  3. Add the CSS to image by giving same width and height of image-container div and position:absolute; to overlap the image-caption content on top of the image.
    .image-container img{
                width:250px;
                height:200px; 
                position:absolute;
    }
    
  4. Add the CSS to image-caption div and give height and width(100%) and position:absolute; to make the image caption content lies exactly on top of the image and make opacity:0; to hide content.
  5. Add the CSS3 transition property for the effect transition:all 300ms ease-in-out and add the cross browser compatibility to make sure that the transition effect works across all the browsers.
    .image-caption {
                width:100%;
                height:100%;
                background:rgba(0, 0, 0, 0.7);
                position:absolute; 
                opacity:0; 
                transition:all 300ms ease-in-out;
               -webkit-transition:all 300ms ease-in-out;
               -moz-transition:all 300ms ease-in-out;
               -o-transition:all 300ms ease-in-out;
               -ms-transition:all 300ms ease-in-out;
    }
    
  6. Add the google font family
    Indie Flower

    and

    Overpass Mono

    for good font effect.

  7. Add the CSS to the h1,p elements and give the opacity:1; ( .image-container:hover .image-caption) to make the content visible. whenever the mouse pointer is hovered on the images.
    .image-caption h1{
                padding:45px 0px 5px 0px;
                text-align:center;
                margin-left:-15px;
                text-transform:uppercase;
                font-family: 'Indie Flower', cursive;
                font-size:25px;
                color:#00bfb6;
    }
    
    .image-caption p{
                text-align:center; 
                font-family: 'Overpass Mono', monospace;
                color:#fff;
    }
    
    .image-container:hover .image-caption{
                opacity:1;
    }
    

See the Pen apEWLd by rajeshdn (@cool_lazyboy) on CodePen.23550

Leave a Reply

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