感谢阅读。当我在图像上添加悬停效果时，我的代码出现了问题，因为当我调整浏览器大小时，布局停止响应并且图像在彼此之上混乱。任何帮助都会受到重视，因为我几天都找不到解决方案:(
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>