在wordpress中将文本悬停在帖子图像上[关闭]答案

【问题标题】：Hover text over post image in wordpress [closed]在wordpress中将文本悬停在帖子图像上[关闭]
【发布时间】：2015-05-26 08:44:02
【问题描述】：

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

我正在尝试在 wordpress 中创建一个博客，该博客目前在首页上有图片摘录。这些图片不是特色图片，它们链接到完整的帖子。我真正想要的是当我将鼠标悬停在首页上的帖子图像上时出现“阅读更多”。

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

但我们将不胜感激。

【问题讨论】：

标签： css wordpress post onhover

【解决方案1】：

试试下面的 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>

【讨论】：

html 应该放在哪里？
我只是给你看例子......你需要根据你的要求将css设置到你自己的页面中并检查它。
是的，但是如果我想用一些文本设置一个跨度类，我需要把它放在某个地方吗？由于它使用 php 而不是 html，我将如何在 wordpress 中做到这一点？
嗨！非常感谢！只是点击了一下，我突然明白如何处理代码。我想这就是学习的过程。你可以花几天时间只是看着一些东西却没有得到它，然后突然之间它就变得有意义了。我知道我必须在我的 front-page.php 中找到图像并将 html 包装在图像代码周围。我现在很开心！

【解决方案2】：

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

【讨论】：

"但是，如果您希望“阅读更多”出现，您将需要现有的关联 HTML 代码" 您的意思是在我的代码中找到 html，还是自己添加一些？因为这是我的问题的html。我不知道在哪里放置它或如何将它与我已有的课程一起使用。