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

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

1 个答案: