CSS 将鼠标悬停在图像和文本上

Question

我在网站主页上有带文本的方 block ，我想添加悬停效果但不知道从我的网站中选择哪个类www.justtobe.com.au 主页

第一张大格子图(沙滩照)，我想加个类似主页格子的悬停效果

<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div>
    <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg" /></figure>
    <span>Hover</span>
</div>
<div>


/* Opacity #2 */



.hover
figure {
background: #1abc9c;
}
.hover12 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 figure:hover img {
opacity: .5;
}

有人可以帮忙吗？

Answer 1

如果您的图片看起来与您提到的网站中的图片相同，则需要更改一些内容，但如果您只想要悬停效果，那么您只需要定位 span

.hover12  span {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 cursor:pointer;
}
.hover12 span:hover {
 opacity: .5;
 display:block;
}

示例:https://jsfiddle.net/fhntLpmz/

但是，如果您希望它看起来像您提到的网站中的那个，您需要更改 html 的结构，然后再更改 css 代码。

<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
    <div class="wrapper">
        <span>Hover</span>
    </div>
<div>

我没有使用 img 来显示图像，而是使用 css 将其作为背景，这样 Hover 按钮就在其中。

.wrapper {
    background-image:url(https://nxworld.net/example/css-image-hover-effects/pic01.jpg);
    background-size:100%;
    background-repeat:no-repeat;
    width:300px;
    height:200px;
}

除此之外，它只是另外几个 CSS。举个例子:https://jsfiddle.net/0shmd21e/1/

不过，有多种方法可以做到这一点。这只是其中之一