Question

我的目标是使用3个图像的响应式页面，并使用按钮应用不透明效果。结合w3教程。我有两个问题。

首先效果适用于最后四张图像。如果我将鼠标悬停在第一张图像上，则会更改第二张图像。当我将鼠标悬停在第二张图像上时按钮太高。其余的都很好。第一张图片也显示了一些边距或填充。

第二个问题是响应部分不起作用。我在想亲戚，但我不懂相对。

如果w3css中存在冲突，我重命名了这些类。这是我的代码。提前感谢您的帮助。

<style>
.containerImage {
position: relative;
width: 30%;
}

.imageMid {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

.midButton {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.containerImage:hover .imageMid {
opacity: 0.3;
}

.containerImage:hover .midButton {
opacity: 1;
}

.text {
background-color: #000000;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>

<div class="w3-row-padding">

<div class="w3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

<div class="3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

<div class="3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

</div>
<div class="w3-row-padding">

<div class="3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

<div class="3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

<div class="3-third containerImage">
<a href="www.s3schools.com">
<img src="Collars.jpg" alt="Avatar" class="imageMid" style="width:100%">
<div class="midButton">
<div class="text">SHOP NOW</div>
</div>
</a>
</div>

</div>

Answer 1

这是一个非常关键的问题。我的天啊！！！！！错字错误：你错过了＃34; W＆＃34;在班级名称。您的代码：<div class="3-third containerImage"> 正确代码：<div class="w3-third containerImage"> 我希望这能解决你的问题。

我试图结合w3schools响应页面与图像效果不能看到冲突

1 个答案: