我需要在一些缩略图上制作悬停效果。我想要的是当我将鼠标悬停在它上面时,会出现相同的图像,不透明度为 70%,文本为白色。
我正在使用引导程序进行操作,因此我将img-responsive
e类放在缩略图中,img-circle
因为我希望它们具有圆形形状。
HTML:
<section class="row text-center col-md-12 center-block text-center">
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img class="img-responsive img-circle" src="images/1.jpg" alt="1" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/2.jpg" class="img-responsive img-circle" alt="2" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/3.jpg" class="img-responsive img-circle" alt="3" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/4.jpg" class="img-responsive img-circle" alt="4" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/5.jpg" class="img-responsive img-circle" alt="5" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/6.jpg" class="img-responsive img-circle" alt="6" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/7.jpg" class="img-responsive img-circle" alt="7" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/8.jpg" class="img-responsive img-circle" alt="8" />
</a>
</div>
</div>
</section>
这是一个示例,说明如何通过 CSS 中的解释来做到这一点。
我必须稍微修改 HTML 的结构才能设置文本样式。也就是说,我增加了一个
<div>
实习生。这是一个响应式解决方案,将缩略图放在
<div>
.这是一个可能的替代方案。它能做什么:
span
将包含文本并将被隐藏的绝对位置。span
上使用 -50% 变换居中。translate
span
将显示带有文本的 ,并用 突出显示图像opacity:0.7
。这是一个将这些更改添加到您的代码的演示: