Question

我几天来一直试图找到一个好的，简单的解决方案，而且我空手而归。

我试图在wordpress上创建一个博客，目前已经在首页上播放了图片。图像不是特色图像，它们链接到完整的帖子。我真正想要的是＆＃34;阅读更多＆＃34;当我将鼠标悬停在首页上的帖子图像上时显示。

理想情况下，如果有可能的话，我很乐意在帖子图片上实现其中一个密码悬停效果（http://tympanus.net/Development/HoverEffectIdeas/）。我非常喜欢wordpress，所以我不知道在哪里放什么代码。

但是我们将非常感谢任何帮助。

Answer 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>

Answer 2

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

在wordpress的翱翔文本在岗位图象

2 个答案: