wordpress - 鼠标悬停时将文本悬停在帖子图片上

Question

我正在使用 Genesis 框架在 wordpress 中重新设计一个博客。这可能是有史以来最简单的事情，但我找不到好的解决方案。

该博客有一个主页，其中显示带有图片的帖子摘录。图片链接到完整的帖子(它不是特色图片)。我想要的是在鼠标悬停时在帖子图像上显示“阅读更多”文本，并且它链接到完整的帖子。我发现这些效果适用于您使用 html 手动添加的图像，但如何仅为发布图像添加这些效果？

理想情况下，我会喜欢 codrops 制作的令人惊叹的悬停效果之一(此处演示:http://tympanus.net/Development/HoverEffectIdeas/index.html)，尤其是 Bubba。

但现在我一直在为此寻找解决方案很长时间，以至于我要接受我得到的东西。

亲切的问候， 部分

figure.effect-bubba {
    background: #9e5406;
}

figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Answer 1

1) 只需下载这个例子。 2)在你的js和css目录下设置脚本和样式。 3)将它们包含在您的脚本中。 4) 将您的图像 html 与此示例图像进行比较。 5) 放置类和元素，例如示例图像。

而且您很容易获得这样的效果。

请注意，这不仅仅是css的魔法，还有一个js也参与了你的Desiree效果。