Question

绝望的新手，但敬业。使用Wordpress。

我希望能够这样做： http://www.ericryananderson.com/

悬停时，图像变为灰度，字幕显示。一切都很顺利。

我最初希望找到一个简单的插件，可以在悬停时切换图像。

非常感谢所有帮助。

阿尔维德

Answer 1

如果您只需向网站添加纯CSS和HTML代码，那么这就是结构：

HTML：

<div class="cool-card">
    <img src="whatever.png">
    <h2>Whatever text you want to show</h2>
</div>

然后，在CSS中：

.cool-card {
    /* Add here any custom style (width, height, etc.) to the card */
}

.cool-card > img {
    width: 100%;
    height: 100%;
}

.cool-card:hover > img {
    filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}

.cool-card > h2 {
    /* If you want to change the look of the text, do it here */
    display: none;
}

.cool-card:hover > h2 {
    display: block;
}

如果你不能，我很抱歉，但我已经尝试过了:)。

新手希望使这个时尚的鼠标悬停效果

1 个答案: