Question

您好我正在尝试为我正在制作的网站上的某些图片添加淡入淡出效果，我还希望当您将鼠标悬停在图片上时会在图片上显示文字。我一直在谷歌搜索并发现教程说你应该在容器中使用class = overlay和class = text然后引用css中的那个。我做了这个，但它搞砸了我的整个格式，我的所有图片都移动了。我应该将overlay类添加到单独的div中，如果不是，我如何将它集成到我之前存在的代码中。谢谢！

<div id="image-wrap">
 <div class="image-column" id="col-1">
   <div class="image-container"><img src="images/piertopier.jpg.JPG"></div>
   <div class="image-container"><img src="images/lookingback.jpg.JPG"></div>
   <div class="image-container"><img src="images/heartshapedflocks.jpg.JPG></div>
 </div>
 <div class="image-column" id="col-2">
   <div class="image-container"><img src="images/twilight.jpg.JPG"></div>
   <div class="image-container"><img src="images/kindofblue.jpg.JPG"></div>
   <div class="image-container"><img src="images/palace.jpg.JPG"></div>
 </div>
 <div class="image-column" id="col-3">
   <div class="image-container"><img src="images/springtide.jpg.JPG"></div>
   <div class="image-container"><img src="images/medina.jpg.JPG"></div>
   <div class="image-container"><img src="images/stipple.jpg.JPG"></div>
 </div>
</div>

Answer 1

在你的样式表部分添加以下样式，以产生悬停淡入淡出效果

IMG：悬停{不透明度：0.5;过渡：1毫秒;}

更改适合您的不透明度和过渡值

淡化图像效果

1 个答案: