添加懸停效果時響應列不起作用

感謝您的閱讀。當我在圖像上添加懸停效果時，我的代碼出現問題，因爲當我調整瀏覽器大小時，佈局停止響應，圖像相互混亂。任何幫助將受到重視，因爲我無法找到，因爲天解決:(添加懸停效果時響應列不起作用

#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

感謝您的檢查;） –

添加懸停效果時響應列不起作用

回答

相關問題