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

Posted 2023-03-06

【中文标题】在鼠标悬停时将文本悬停在帖子图像上

【英文标题】：Hover text over post image on mouseover

【发布时间】：2015-08-06 19:36:07

【问题描述】：

我正在使用 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);

【参考方案1】：

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

而且你很容易就能得到这样的效果。

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

【讨论】：

对不起，我不太明白你的意思。我确实下载了源代码，但没有 .js 文件。这是一个 CSS 悬停效果。

请给我你的项目链接..我会帮你查的。