Display Caption on hover using CSS and HTML

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

           

            
            

             
             

              
              

               Foggy Morning
              
             
            
           

The HTML part of this effect is simple, all you have to do is place the txt inside the