我想結合w3schools響應頁面與圖像效果不能看到衝突

我的目標是有一個響應式頁面3×3的圖像，並應用不透明度效果的按鈕。結合w3教程。我有兩個問題。我想結合w3schools響應頁面與圖像效果不能看到衝突

首先效果對最後四張圖像起作用。如果我將鼠標懸停在第一張圖片上，它會更改第二張圖片。當我將鼠標懸停在第二張圖片上時，按鈕太高。其餘的都很好。第一張圖片也顯示了一些邊距或填充。

第二個問題是響應部分不工作。我在想相對，但我不明白親戚。

在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>

來源

2017-09-19 Bodine

這是一個非常關鍵的問題。我的天啊！！！！！錯字錯誤：您錯過了課程名稱中的「W」。您的代碼：<div class="3-third containerImage"> 正確的代碼：<div class="w3-third containerImage"> 我希望這可以解決您的問題。

來源

2017-09-19 17:16:59

如果我能給你十個綠色複選標記，我會！非常感謝。就是這樣。查找和替換有雙重檢查你的替換。再次感謝！ – Bodine

我想結合w3schools響應頁面與圖像效果不能看到衝突

回答

相關問題