Question

我在网站主页上有文字方块，我想添加悬停效果，但不知道从我的网站中选择哪个类 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将其作为背景，以便悬停按钮位于其中。

.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/

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

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

1 个答案: