Displaying text on Image hover using HTML and CSS

highest-waterfall-text-on-image-hover-effect-html-css

Image hover effects are usually used to increase attraction as well as gaining attention of the visitors towards a certain image. Here is a similar effect in which the details or description of the image will be displayed when the user hovered it with the mouse. These type of hover effects will be very useful for your gallery pages or to display information about a certain place , thing or even a person. 

VIEW DEMO

CSS CODE:

#picture {
      width: 300px;
      height: 300px;
      background: url(your image URL) no-repeat;
      background-size: 300px 300px;
      border: 10px solid #fff;
      position: relative;    
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       box-sizing: border-box;
       -webkit-box-shadow: 5px 5px 5px #111;
       box-shadow: 5px 5px 5px #111;     
               }
.pic_transform {
        transition-duration: 0.5s;            
        -webkit-transition-duration: 0.5s; 
        -moz-transition-duration: 0.5s;    
        -o-transition-duration: 0.5s;
         overflow: hidden;
         height: 0px;
                         }
#picture:hover .pic_transform {
          height: 50px;
                          }
.text_display {
        transform-origin: top;               
        transition-duration: 0.5s;               
        -webkit-transform-origin: top;       
        -webkit-transition-duration: 0.5s;   
        -moz-transform-origin: top;           
        -moz-transition-duration: 0.5s;       
        -o-transform-origin: top;    
        -o-transition-duration: 0.5s;
        font-size: 16px;
        font-family: Arial;       
        font-weight: normal;
        text-align:center;
        color: #FFF;       
                     }
#picture:hover .text_display {
         background: rgba(0, 0, 0, 0.5);   
         color: #fff;   
         height:50px;   
                      }

The CSS code of the above effect consists of three elements in it.  The first id “picture” is used as a container to assign the size, background size and position of the image used. You can remove the “border-box” is you don’t need it and use the plan image for this effect. The second class “.pic_transform” used to assign the transition time and height of the text are over the image. The third class “.text_display” was used to assign  the properties of the text to be displayed above the image when hovered. And then it was assigned to be changing their values after the “picture” container is hovered.

HTML CODE:

<div id="picture">
    <div class="pic_transform">
        <div class="text_display">
            <h>Your text</h>
        </div>
    </div>
</div>

The HTML part of this effect is very simple, all you have to do is place your text in the <div> containers with ideal class and id’s used in the CSS code

.


7 Comments

  1. kashif

    Dear Admin,
    I want to place two pictures above in line horizontally, plz describe ASAP.

    Reply
  2. Anonymous

    image hover

    Reply
  3. freddie penn

    how would you change the image if you were trying to make gallery how could i use a different photo?

    Reply
    1. Frank Donald

      This effect may help you follow this link Crossfading image hover effect

      Reply
    2. Freddie Penn

      hey thanks, now im having a tough time trying to get the text to appear from the bottom instead of the top i changed the css

      #picture {
      width: 200px;
      height: 200px;
      background: url(../img/tfkblacklogo.png) no-repeat;
      background-size: 200px 200px;
      border: 7px solid #fff;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 5px 5px 5px #111;
      box-shadow: 5px 5px 5px #111;
      }
      .pic_transform {
      transition-duration: 0.5s;
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      -o-transition-duration: 0.5s;
      overflow: hidden;
      height: 0px;
      }
      #picture:hover .pic_transform {
      height: 50px;
      }
      .text_display {
      transform-origin: bottom;
      transition-duration: 0.5s;
      -webkit-transform-origin: bottom;
      -webkit-transition-duration: 0.5s;
      -moz-transform-origin: bottom;
      -moz-transition-duration: 0.5s;
      -o-transform-origin: bottom;
      -o-transition-duration: 0.5s;
      font-size: 16px;
      font-family: Arial;
      font-weight: normal;
      text-align:center;
      color: #FFF;
      }
      #picture:hover .text_display {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      height:50px;
      }
      any help?

      Reply
    3. mukul soni

      It still comes from the top of the image

      Reply
  4. lingmaaki

    More CSS hover effects

    Image Hover

    css tutorial

    Reply

Leave a Comment

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