w3schools 반응 형 페이지와 이미지 효과를 결합하려고합니다. 충돌을 참조하십시오.

내 목표는 반응 형 페이지 3x3 이미지를 가지고 단추로 불투명 효과를 적용하는 것입니다. w3 자습서 결합. 두 가지 문제가 있습니다.w3schools 반응 형 페이지와 이미지 효과를 결합하려고합니다. 충돌을 참조하십시오.

첫 번째 효과는 마지막 4 개의 이미지에 적용됩니다. 첫 번째 이미지 위에 마우스를 올려 놓으면 두 번째 이미지가 변경됩니다. 두 번째 이미지 위로 마우스를 가져 가면 버튼이 너무 높습니다. 나머지는 괜찮습니다. 첫 번째 이미지는 여백이나 패딩도 표시합니다.

두 번째 문제는 반응 형 부품이 작동하지 않는 것입니다. 나는 상대를 생각하고 있지만 나는 상대적인 것을 이해하지 못합니다.

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 반응 형 페이지와 이미지 효과를 결합하려고합니다. 충돌을 참조하십시오.

답변

관련 문제