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

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

1 个答案: