小图悬停在大图上 css

Question

我知道之前有人问过这个问题，但我已经尝试了其他选项，但没有正常工作。

我想做的是将 .png 图像放在占位符上，而不切换或删除 placeholder 以显示 .png，我什至不确定让我的 HTML 为那种类型的效果正确设置。

<ul class="portfolio-images">
    <li class="box-one"><a href="#"><img src="http://placehold.it/350x330"></li></a>
    <li class="box-two"><a href="#"><img src="http://placehold.it/350x330"></li></a>
    <li class="box-three"><a href="#"><img src="http://placehold.it/350x330"></li></a>
</ul>

Answer 1

如果你想添加 png 文件来隐藏你的占位符图像，那么这个方法就可以完成这项工作。通过将 :before 伪元素添加到投资组合列表中的 a。

http://liveweave.com/lx2OAr

方法很简单。 :before 元素将用 100% 的 width 和 height 包裹整个内容。 transition 会给元素添加一些淡入和淡出效果。

希望对您有所帮助！

小图悬停在大图上 css

small image over large image hover css

html

css

image

hover