title: background transition fix and background dim on hover [fiddle inside]
body: <p>I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.</p>
  
  <p>I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues</p>
  
  <p><strong>no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code</strong></p>
  
  <pre><code>    #circle_wrap{
      position: absolute; 
      margin-top: -130px;
      }
  </code></pre>
  
  <p><strong>no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.</strong></p>
  
  <p><a href="http://jsfiddle.net/n3r8yta4/2/" rel="nofollow">JSFIDDLE here</a></p>
  
  <p>If anything couldn't be solved with css only, I'd accept jquery solution as well.</p>
  
  <p>I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
  Thank you.</p>