Image 悬停图像链接上的图像描述

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

项目名称
项目名称
项目名称

Html

---

你可以这样做：

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>

#Descprition{
    display:none;
}

img:hover + #Descprition{

    display:block;
}

<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>

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