我想知道如何将鼠标悬停在图像上并显示文字

Question

这是一个例子：http://metalabdesign.com/company/

我希望它简单，不要使用任何JS。我一直在坚持知道这需要的css定位。我知道我也需要使用悬停。

Answer 1

您可以设置围绕图像和标题的包装div。默认情况下隐藏字幕。

然后使用选择器来定位标题，但仅限于包装器悬停时。

修改

您希望将标题定位到包装器absolutely和relative。这将使其显示在图像的顶部。

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

检查一下。

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%;}