html - 如何在悬停多个缩略图图像时设置黑色透明度，每个图像都有不同的位置？

Question

我正在尝试在悬停多个缩略图图像时设置多个黑色透明图像，并且每个图像都有不同的位置。为了确保这一点，每个图像都有自己的类(img1、img2、img3...)，并定义了不同的边距。

HTML

<div data-content="Text here" class="image">
 <div class="img1">
  <a href="site1.html"><img src="../img1"></a>
 </div>
</div>
<div data-content="Text here" class="image">
 <div class="img2">
  <a href="site2.html"><img src="../img2"></a>
 </div>
</div>

CSS IMG

.img1 {
  height:200px;
  position:relative;
  margin-top:-10%;

}
.img2 {
  height:200px;
  position:relative;
  left:10%;
}

CSS 透明度

.image {
    position:relative;
    width:200px;
    height:200px;
}
.image img {
    width:100%;
    vertical-align:top;
}
.image:after {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Answer 1

我认为您可能有太多包装器，但这是一种结构稍微简单一些的方法

JSfiddle

HTML

<div class="thumbnail" data-content="Text here">
    <a href="site1.html"><img src="http://lorempixel.com/output/people-q-c-200-200-5.jpg"/></a>
</div>

<div class="thumbnail" data-content="Text here">
    <a href="site2.html"><img src="http://lorempixel.com/output/transport-q-c-200-200-6.jpg"/></a>
</div>>

CSS

.thumbnail {
    display: inline-block;
    position: relative;
}

.thumbnail a,
.thumbnail a img {
    display: block;
}

.thumbnail:after {
    content: attr(data-content);
    color:transparent;
    position:absolute;
    width:100%; height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.0);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.thumbnail:hover:after {
    background:rgba(0,0,0,0.6);
    color:#fff;
}