Question

我有一个包含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>

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

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

关于悬停图像链接的图像说明

2 个答案:

HTML

的CSS