小图像悬停在大图像之上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将为元素添加一些淡入淡出效果。

希望它能有所帮助！