大图像悬停css上的小图像

Posted 2023-03-05

【中文标题】大图像悬停css上的小图像

【英文标题】：small image over large image hover css

【发布时间】：2016-01-27 15:34:09

【问题描述】：

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

我想要做的是在占位符上放置一个.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>

【问题讨论】：

我可以询问具体情况吗？您是否在通过 javascript 或其他方式加载页面后添加新图像？

我试图通过 css 将我的 .png 放入其中，就像您如何使用精灵进行悬停一样。我确实考虑过通过 java 把它放进去，但我找不到任何能让我知道如何做到这一点的东西。

【参考方案1】：

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

http://liveweave.com/lx2OAr

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

希望对你有帮助！

【讨论】：

我并没有试图隐藏占位符，只是将 .png 放在顶部并且仍然能够看到后面的占位符。

我想我将不得不询问您的完整代码。既然你只给了我一个占位符图像的列表，那是我能帮助你的最好的了。或者也许你可以从其他网站举出任何例子？会尽我所能提供帮助。

您想要完整的 html 和 css 还是只是与我要编辑的区域相关的代码？

“.png over top”是什么意思？您是否尝试添加透明的 png 文件以避免图像被盗？让我知道。谢谢！

好的，这类似于当您将鼠标悬停在图像上并出现加号或放大镜符号时，您仍然可以看到它后面的图像。类似于他们对像这样的放大类符号所做的事情，您仍然可以看到它背后的图像。 webdesignandsuch.com/posts/jquery-image-rollover 只是一张 png 图片。