【问题标题】:small image over large image hover css大图像悬停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 把它放进去,但我找不到任何能让我知道如何做到这一点的东西。

标签: html css image hover


【解决方案1】:

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

http://liveweave.com/lx2OAr

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

希望对你有帮助!

【讨论】:

  • 我并没有试图隐藏占位符,只是将 .png 放在顶部并且仍然能够看到后面的占位符。
  • 我想我将不得不询问您的完整代码。既然你只给了我一个占位符图像的列表,那是我能帮助你的最好的了。或者也许你可以从其他网站举出任何例子?会尽我所能提供帮助。
  • 您想要完整的 html 和 css 还是只是与我要编辑的区域相关的代码?
  • “.png over top”是什么意思?您是否尝试添加透明的 png 文件以避免图像被盗?让我知道。谢谢!
  • 好的,这类似于当您将鼠标悬停在图像上并出现加号或放大镜符号时,您仍然可以看到它后面的图像。类似于他们对像这样的放大类符号所做的事情,您仍然可以看到它背后的图像。 webdesignandsuch.com/posts/jquery-image-rollover 只是一张 png 图片。
猜你喜欢
  • 2013-09-03
  • 1970-01-01
  • 1970-01-01
  • 2015-06-08
  • 2019-05-24
  • 2014-09-09
  • 1970-01-01
  • 2013-10-30
  • 1970-01-01
相关资源
最近更新 更多