title: css image overlay on background image
body: <p>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.</p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="css/venues.css"&gt;
  &lt;/head&gt;
  
  &lt;section class="alt-section"&gt;
  
    &lt;h2&gt; Places we've played.&lt;/h2&gt;
  
    &lt;div class="thumb-container"&gt;
      &lt;a href ="" class="thumb-unit"&gt;
        &lt;div class="thumb-overlay"&gt;
          &lt;strong&gt;Bar 42&lt;/strong&gt;
          &lt;div class="zoom-icon"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
  
      &lt;a href ="" class="thumb-unit"&gt;
        &lt;div class="thumb-overlay"&gt;
          &lt;strong&gt;The Prince Albert&lt;/strong&gt;
          &lt;div class="zoom-icon"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
  
  &lt;/section&gt;
  </code></pre>
  
  <p>and the css is..</p>
  
  <pre><code>.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;
  
  }
  </code></pre>
  
  <p>The youtube video has got me up to a point where they have completed it but i am still stuck on this. <a href="https://www.youtube.com/watch?v=ygvo1_kqVUg" rel="nofollow">https://www.youtube.com/watch?v=ygvo1_kqVUg</a></p>
  
  <p>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.</p>
  
  <p>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.<a href="https://i.stack.imgur.com/Kne23.png" rel="nofollow"><img src="https://i.stack.imgur.com/Kne23.png" alt="enter image description here"></a></p>