I''d like to know how to hover over an image and have text show

Question

here is an example: http://metalabdesign.com/company/

I want it to be simple and NOT use any JS please. I keep getting stuck on knowing the css positioning needed for this. I know i will need to use a hover as well.

Answer 1

You can set a wrapper div that goes around the image and the caption. Have the caption hidden by default.

Then use a selector to target the caption, but only when the wrapper being hovered.

Edit

You want to have the caption positioned absolutely and relative to the wrapper. This will make it appear on top of the image.

http://jsfiddle.net/9eRXG/

HTML

<figure>
    <img src="http://lorempixel.com/400/200/nature/">
    <figcaption>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</figcaption>
</figure>

CSS

figcaption {
    display: none;
    position: absolute;
}

figure:hover figcaption {
    display: block;
}

figure {
    position: relative;
}

Answer 2

Check this out .

Fiddle

HTML

<ul class="dogs">
    <li class="dog">
        <img class="dog-photo" src="http://placehold.it/200x300" />
        <div class="dog-info">
             <h3 class="info-name">Dog 1</h3>
             <span class="info-title">Founder / CEO</span>
        </div>
    </li>
    <li class="dog">
        <img class="dog-photo" src="http://placehold.it/200x300" />
        <div class="dog-info">
             <h3 class="info-name">Dog 2</h3>
             <span class="info-title">Founder / CEO</span>
        </div>
    </li>
</ul>

CSS

.dogs{
    margin:0;
    list-style-type:none;
}
.dog {
    width:200px;
    height:300px;
    position:relative;
    float:left;
    margin-right:20px;
}
.dog:hover .dog-info{
    opacity:1;
}
.dog-info {
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.8);
    top:0;
    left:0;
    opacity:0;
}
.info-name,.info-title{
    position:relative;
    left:50%;
    width:100px;
    margin-left:-50px;
    text-align:center;
    display:block;
}
.info-name{top:35%;}
.info-title{top:35%;}