title: hover over photo wont add transparent div
body: <p>I'm trying to add a transparent text overlay on top of an image. I've decided that using CSS to add the transparent div would be easiest, but can't figure out why my code isn't working. I changed the opacity of the image when hovering over and set the div containing the text to <code>visibility:hidden</code>. I used the <code>hover</code>effect to make <code>visibility:visible</code>. I just can't get it to work though. please help. Here's the fiddle:</p>
  
  <p><a href="https://jsfiddle.net/3Lx1pyL9/" rel="nofollow noreferrer">https://jsfiddle.net/3Lx1pyL9/</a></p>
  
  <p>Here's the html: </p>
  
  <pre><code>&lt;div id="chickcontainer"&gt;
  
          &lt;img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"&gt;&lt;div class="overlay"&gt;chicks&lt;/div&gt;
          &lt;img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750"&gt;
          &lt;img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and the css: </p>
  
  <pre><code>#chickcontainer img{
      position:relative;
      width:30%;
      height:30%;
      display:inline-block;
      margin-left:2%;
      border-radius:100%;
      border: solid .5px;
  
  }
  
  .overlay{
      visibility:hidden;
      position:absolute;
      width:20%;
      height:90%;
      top:12%;
      left:7%;
      z-index:0;
  }
  
  #chickcontainer img:hover .overlay{
      visibility:visible;
      z-index:100;
  }
  </code></pre>