호버 효과가 추가되었을 때 반응 형 열이 작동하지 않음

감사합니다. 내 코드의 문제는 브라우저의 크기를 조정할 때 레이아웃이 응답하지 않게되고 이미지가 서로 겹치기 때문에 이미지에 호버 효과를 추가했을 때부터 시작되었습니다. 내가 마리나 근접 촬영 에서호버 효과가 추가되었을 때 반응 형 열이 작동하지 않음

http://wall-e.blue/tobias/index.html

#col_1 { 
 
float:right; 
 
padding: 3%; 
 
width: 24%; 
 
max-width: 100%; 
 
height: auto; } 
 

 
#col_2 { 
 
float: left; 
 
padding: 3%; 
 
width: 24%; 
 
text-align: left; 
 
max-width: 100%; 
 
height: auto; 
 
} 
 
.wow { 
 
position:relative; 
 
width: 330px; 
 
height:510px; 
 
-webkit-transition: opacity 0.8s ease-in-out; 
 
-moz-transition: opacity 0.8s ease-in-out; 
 
-o-transition: opacity 0.8s ease-in-out; 
 
-ms-transition: opacity 0.8s ease-in-out; 
 
transition: opacity 0.8s ease-in-out; 
 
} 
 
.wow img { 
 
position:relative; 
 
top:0; 
 
left:0; 
 
z-index:1 
 
} 
 
.overlay { 
 
font-family: arial; 
 
font-size: 1em; 
 
color: black; 
 
padding-top: 10px; 
 
z-index:2; 
 
opacity:0; 
 

 
-webkit-transition: opacity 0.4s ease-in-out; 
 
-moz-transition: opacity 0.4s ease-in-out; 
 
-o-transition: opacity 0.4s ease-in-out; 
 
-ms-transition: opacity 0.4s ease-in-out; 
 
transition: opacity 0.4s ease-in-out; 
 
} 
 
.wow:hover > .overlay { 
 
opacity:1; 
 
width:560px; 
 
height:310px height:auto; 
 
} 
 

 

 

 

 
@media all and (max-width : 768px) { 
 

 
#col_1 { 
 
    width: 94%; 
 
    padding: 1%; 
 
} 
 
#col_2 { 
 
    width: 94%; 
 
    padding: 1%; 
 
    }

<body> 
 
<br> 
 
<br> 
 
<div id="title"> 
 
<span class="titulo" > Tobias Willmann</span> 
 
<br> 
 
<br> 
 
<span class="mail" > </span> 
 
</div> 
 
<div id="links"> 
 
<ul> 
 
<li><a href="about.html"> About</a></li> 
 
<li><a href="contact.html">Contact</a></li> 
 
</ul> 
 
<br> 
 
<br> 
 
<div id="col_1"> 
 
<div class="wow"> 
 
<img src="Katerinaneu_web.jpg" /> 
 
<div class="overlay">2016_hahahhaha</div> 
 
<br><br><br><br><br><br><br><br><br><br><br><br> 
 
<a href= "easter.html" > <img src= "easter_web.jpg" /> </a> 
 
<div class="overlay">2016_nnn</div> 
 
</div> 
 
</div> 
 
<div id="col_2"> 
 
<div class="wow"> 
 
<img src="Marina_closeup.jpg" /> 
 
<div class="overlay">2015_nnn</div> 
 
<br><br><br><br><br><br><br><br><br><br><br><br> 
 
<img src="adriana_web.jpg" /> 
 
<div class="overlay">2015_i know you love</div> 
 
</div> 
 
</div>

출처

2016-12-04 Victoria G.

.wow 클래스의 너비는 ** px **입니다. 100 %로 변경하려고 시도합니다. – Nandhu

정말 고마워요! 이 작품 :) 확인을위한 –

.wow { 
    height:510px; 
}

이미지가 상단에 갈 만든다 :(일부터 해결책을 찾을 수 없습니다입니다 때문에 어떤 도움이 평가 될 것이다 지금까지 볼 수있는 다른 이미지의 크기입니다.

출처

2016-12-04 16:02:59 Seydie

감사;) –

호버 효과가 추가되었을 때 반응 형 열이 작동하지 않음

답변

관련 문제