html - Wordpress 媒体文件 - 将鼠标悬停在图像上

Question

我需要做什么:

我在可视化编辑器中通过媒体 uploader 将图像添加到 wordpress 帖子。

在站点上，当鼠标悬停在这些图像上时，我希望它为另一张具有黄色背景和不透明度以及“+”符号的图像做悬停效果。

我尝试了很多东西，甚至是“image hover”的旧插件，但都没有用。

有没有办法只用 css 来做？没有脚本？如果是 - 如何？

Answer 1

这是 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);
}