首先,效果作用于最后四幅图像。如果我将鼠标悬停在第一个图像上,它会更改第二个图像。当我将鼠标悬停在第二个图像上时,按钮太高。其余的都很好。第一个图像也显示了一些空白或填充。
第二个问题是响应部分不起作用。我在思考相对,但我不理解相对。
<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>
