Display Caption on hover using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
display-caption-on-hover
Caption Display Image hover effect
Image hover effects have become an element in website as its improves the dynamic feel of the site and increases attraction as well. This post will explain a similar Display caption on effect in which description of the image will be displayed when the visitors hovers over the image. These type of effects will be very useful where the webmaster wants to display info of products in limited space.

CSS CODE:

.wrap {
          border:10px solid #fff;
display: inline-block;
text-align: left;
position: relative;
         -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
          }
.display {
        position: relative;
overflow: hidden;
          }
.display img {
display: block;
          }
.caption {
position: absolute;
        width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(0,0,0,0.4);
color: #fff;
top: 100%;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
            }
.wrap:hover .caption {
                          top: 0;
                              }
#txt_stl{
          text-align:center;
          font-size:20px;
          margin-top:50%;
               }

The CSS code of the above effect consists of four elements. The “.wrap” is used to assign a container to the image we are about to use. The second element “.display” is used to position the image and hide overflowing of caption elements. The class “.caption” used to define the look and appearance of caption. And last “#txt_stl” to alter the appearance and position of our caption text. 

HTML CODE:

<div class="wrap">
     <div class="display">
<img src="Your image URL" width="250" height="250" />
        <div class="caption">
            <div id="txt_stl">
                  Foggy Morning
            </div>
        </div>
    </div>
</div>

The HTML part of this effect is simple, all you have to do is place the txt inside the <div> container with proper class and id’s used in your CSS code.

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 "Display Caption on hover using CSS and HTML"

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

It would be super cool if it could grap the caption from the img alt attribute, but I suppose that would require some javascript.

Frank Donald
Guest

Sorry iam not familiar with Javascript, if you know such technique you can share it with us

wpDiscuz