悬停图片链接上的图片说明答案

【问题标题】：Image Description on Hover Image Link悬停图片链接上的图片说明
【发布时间】：2014-05-28 03:33:13
【问题描述】：

我有一个包含 9 张图片的页面。每个图像都链接到有关该项目的页面。我希望将鼠标悬停在图像上时显示项目名称和褪色的颜色。我不知道这是否可以通过链接样式的悬停定义来完成，或者我是否需要使用 javascript。我也不知道我是否需要多个 div 重叠——特别是因为我希望淡入淡出的颜色覆盖整个图像，但文本要左缩进。

您将在下面发现顶行图像的 div 只是占位符。

<div id="Wrapper">
<div id="images">
<div id="thumbnails_row1">
<div id="houses_01"><div class="site_nav_left">PROJECT TITLE</div class="site_nav_left"></div>
<div id="houses_02"><div class="site_nav_right">PROJECT TITLE</div class="site_nav_right"></div>
<div id="houses_03"><div class="site_nav_right">PROJECT TITLE</div class="site_nav_right"></div>
</div>
</div>
</div>

【问题讨论】：

标签： image text hyperlink hover

【解决方案1】：

Click for Demo

HTML

  <div id="wrapper">
   <img src="http://placehold.it/350x150" alt="Smiley face" height="42" width="42"/> 
    <div id="Descprition">
    Image Description
    </div>    

   </div>

CSS

#Descprition{
    display:none;
}

img:hover + #Descprition{

    display:block;
}

【讨论】：

【解决方案2】：

你可以这样做：http://jsfiddle.net/y3Vyb/

HTML

<div class="thumbnails">
  <div class="thumbnail">
    <img src="http://placehold.it/150x150" alt="" class="thumbnail-image" />
    <div class="thumbnail-caption">This is a caption</div>
  </div>
  <div class="thumbnail">
    <img src="http://placehold.it/150x150" alt="" class="thumbnail-image" />
    <div class="thumbnail-caption">This is a caption</div>
  </div>
  <div class="thumbnail">
    <img src="http://placehold.it/150x150" alt="" class="thumbnail-image" />
    <div class="thumbnail-caption">This is a caption</div>
  </div>
</div>

CSS

.thumbnail{
  float: left;
  margin: 10px;
  position: relative;
}

.thumbnail-caption{
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  display: none;
}

.thumbnail:hover .thumbnail-caption {
  display: block;
}

【讨论】：