【发布时间】:2014-02-20 22:22:58
【问题描述】:
我需要做什么:
我在可视化编辑器中通过媒体上传器将图像添加到 wordpress 帖子中。
在网站上,当悬停在这些图像上时,我希望它为另一个具有黄色背景和不透明度以及“+”符号的图像做悬停效果。
我尝试了很多东西,甚至是“image hover”的旧插件,但都没有奏效。
有没有办法只用 css 做到这一点?没有脚本?如果是 - 如何?
【问题讨论】:
我需要做什么:
我在可视化编辑器中通过媒体上传器将图像添加到 wordpress 帖子中。
在网站上,当悬停在这些图像上时,我希望它为另一个具有黄色背景和不透明度以及“+”符号的图像做悬停效果。
我尝试了很多东西,甚至是“image hover”的旧插件,但都没有奏效。
有没有办法只用 css 做到这一点?没有脚本?如果是 - 如何?
【问题讨论】:
这是 css,但它也需要一些 html 更改。
这是一个Fiddle 来验证这是您想要的。
@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css');
.size-thumbnail {
position: relative;
text-align: center;
width: 150px;
height: 150px;
}
.size-thumbnail:hover:before {
content: "\f067";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
color: #000;
font-size: 50px;
position: absolute;
line-height: 150px;
width: 150px;
background-color: rgba(255,247,102,0.5);
}
【讨论】: