因此，我一直在尝试在网站上使用叠加层，我一直在看教程，但是现在我到了一个我不知道自己在做什么错的地步。
<head>
<link rel="stylesheet" href="css/venues.css">
</head>
<section class="alt-section">
<h2> Places we've played.</h2>
<div class="thumb-container">
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Bar 42</strong>
<div class="zoom-icon">
</div>
</div>
</a>
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>The Prince Albert</strong>
<div class="zoom-icon">
</div>
</div>
</a>
</div>
</section>
和CSS是..
.alt-section{
background-color: #e6e6e6;
margin: 0 auto;
}
.alt-section h2{
padding:50px;
color: #e1c184;
font-family: Spliffs;
text-align: center;
font-size: 35;
}
.alt-section a{
font-family: sans-serif;
padding:10px;
font-size: 18px;
text-decoration: none;
color: #cd9732;
}
.alt-section a:hover{
color: #e1c184;
}
.thumb-container{
max-width: 960px;
margin: 0px auto;
padding-bottom: 100px;
overflow: hidden;
}
.thumb-unit{
display:block;
width: 150px;
float:left;
position: relative;
height: 150px;
background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.thumb-overlay{
position:absolute;
top:100%;
left:0px;
right:0px;
bottom:null;
height:100%;
background:rgba(205,151,50,0.5);
}
.thumb-overlay:hover{
position:absolute;
top:0%;
left:0px;
right:0px;
bottom:null;
background:rgba(205,151,50,0.5);
transition: linear;
transition-duration: 0.5s;
}
youtube视频使我达到了他们完成它的地步，但我仍然坚持这一点。 https://www.youtube.com/watch?v=ygvo1_kqVUg
所以我的实际问题是与锚标签上的Hitbox大小有关，我似乎无法增加大小，因此当我将鼠标悬停在其上方时，会弹出叠加层。
我已将溢出重新变为可见，因此您可以看到我的问题，但是当我在照片上滚动时，只有当我将鼠标悬停在文字上时，叠加层才会弹出。
最佳答案
#element-with-background-image {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>