title: I want to apply a overlay image on hover
body: <p>But I am struggling.</p>
  
  <p>Code I have for css is:</p>
  
  <pre>
  #gallery img {
  width:700px;
  height:213px;
  margin:0;
  padding:0;
  }
  </pre>
  
  <p>So I thought ...</p>
  
  <pre>
  #gallery img:hover {
      width:700px;
      height:213px;
      position: relative;
      z-index:10000;
      background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
  }
  </pre>
  
  <p>Would work, but it doesnt.</p>
  
  <p>The image I am transparently overlaying on hover is:</p>
  
  <p><img src="https://i.stack.imgur.com/XZBJo.png" alt="alt text"></p>
  
  <p>What am I doing wrong.
  I think I may have a corrupt css tag somewhere.</p>
  
  <p>Any help appreciated.</p>