Jonny Gina Dommett Jonny Gina Dommett - 1 month ago 19
CSS Question

css image overlay on background image

so i am trying to get an overlay to work on my website, i've been watching a tutorial, but now i have gotten to a point where i don't know what i'm doing wrong.

<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>


and the css is..

.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;

}


The youtube video has got me up to a point where they have completed it but i am still stuck on this. https://www.youtube.com/watch?v=ygvo1_kqVUg

So my actuall problem is to do with the size of a hitbox on an anchor tag i cant seem to increase the size so when i hover over it the overlay will pop up.

I have turned the overflow back to visible so you can see my problem, but when i scroll over the photo the overlay will not pop up its only when i hover over the writing will it then come up.enter image description here

Answer

#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>