在鼠标悬停时将文本悬停在帖子图像上

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效果。