w3schoolsレスポンシブページとイメージエフェクトを組み合わせようとしています。コンフリクトを参照してください。

私の目標は、画像3枚で3枚の反応性のあるページを作成し、ボタンで不透明効果を適用することです。 w3チュートリアルを組み合わせる。私には2つの問題があります。w3schoolsレスポンシブページとイメージエフェクトを組み合わせようとしています。コンフリクトを参照してください。

最初にエフェクトは最後の4つの画像に作用します。最初の画像の上にマウスを置くと、2番目の画像が変わります。 2番目の画像にカーソルを合わせると、ボタンが高すぎます。残りは問題ありません。最初の画像にも余白やパディングがあります。

第2の問題は応答性の高い部分が機能していないことです。私は相対的な考えをしているが、私は相対的なものを理解していない

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

私はあなたに10枚の緑色のチェックマークを付けることができたら、私は!!!どうもありがとうございます。それはそれだった。見つけて交換してください。あなたの交換を再確認してください。もう一度ありがとう！ – Bodine

w3schoolsレスポンシブページとイメージエフェクトを組み合わせようとしています。コンフリクトを参照してください。

答えて

関連する問題