SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make this caption hover work with a fluic width/height box?

    So i have an IMG that i want to have a full cover caption on when hovering and my code looks like this ATM:

    Code HTML4Strict:
    <div class="box">
       <img src="#" />
       <span class="caption">hello</span>
    </div>

    Code CSS:
    .box{
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 200px;
    }
     
    img{
    position: absolute;
    left: 0;
    height: 200px;
    width: 200px;
    }
     
    .caption{
    position: absolute;
    opacity: 0;
    background: #000;
    height: 200px;
    width: 200px;
    }
     
    .caption:hover{
    opacity: 0.7;
    }

    And this is working, but the thing is i dont want the widht and height to be static, i want it to depend on the size of the image, and the img actual size is % based as it is a responsive design. Maby its easy but my brain doesnt seem to work atm.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You could try something like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    .box{
    position: relative;
    overflow: hidden;
    width: 30%;
    }
     
    img{
    width: 100%;
    height: 100%;
    }
     
    .caption{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: #000;
    height: 100%;
    width: 100%;
    color: red;
    display: block; 
    text-align: center;
    font-size: 3em;
    }
     
    .caption:hover{
    opacity: 0.7;
    }
    </style>
    	
    </head>
    <body>
    
    <div class="box">
       <img src="image.gif">
       <span class="caption">hello</span>
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •