在 wordpress 中将文本悬停在 post 图片上

Question

几天来我一直在努力寻找一个好的、简单的解决方案，但我空手而归。

我正在尝试在 wordpress 中创建一个博客，目前在首页上有图片摘录。这些图像不是特色图像，它们 link 完整 post。我真正想要的是当我将鼠标悬停在首页的 post 图像上时 "read more" 出现。

理想情况下，如果可能的话，我很乐意在 post 图像上实现其中一种 codrops 悬停效果 (http://tympanus.net/Development/HoverEffectIdeas/)。我是wordpress的新手，所以我不知道把什么代码放在哪里。

但如有任何帮助，我们将不胜感激。

Answer 1

在 WordPress 中，转到外观 -> 编辑器并编辑 style.css 或您的主 .css 主题文件。你可以把你的悬停代码放在那里。您还需要将相应的类添加到您的图像中。但是，如果您希望 "read more" 出现，则需要现有的关联 HTML 代码。另一方面，你有一些可用的悬停插件，我通过快速搜索找到了这个插件：https://wordpress.org/plugins/amazing-hover-effects/ 祝你好运。

Answer 2

尝试以下 HTML 和 CSS 的核心代码：

<style type="text/css">
div.texthover 
{   
    display:block;
    position:relative; 
    width:150px;
}

div.texthover .overlay 
{
    position:absolute;
    top:45%;
    width:100;
    width:150px;       
    background-color:rgba(0, 0, 0, 0.3);
    display:none;width:150px;
}
div.texthover:hover .overlay 
{
    display:block;
}
</style>


<div class="texthover"><br />
    <img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
    <span>This is some text I want to display</span>
</div>
</div>

在 wordpress 中将文本悬停在 post 图片上

Hover text over post image in wordpress

css

wordpress

post

onhover