添加悬停效果时响应列不起作用

感谢您的阅读。当我在图像上添加悬停效果时，我的代码出现问题，因为当我调整浏览器大小时，布局停止响应，图像相互混乱。任何帮助将受到重视，因为我无法找到，因为天解决:(添加悬停效果时响应列不起作用

#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

感谢您的检查;） –

添加悬停效果时响应列不起作用

回答

相关问题