title: jQuery Cycle2 – overlay size to match slide's image size
body: <p>I'm trying to use jQuery to get the current slide's image size in a Cycle2 slideshow.</p>
  
  <p>This is so I can set the size of an overlay div (<code>.overlay</code>) that appears on .hover(). As you'll see in this <a href="http://jsfiddle.net/approach/76uJm/3/" rel="nofollow">fiddle</a>, it is only getting the size from the first image. The images will be responsive too, so <code>.overlay</code> will also need to update it's size based on any window resizing.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/approach/76uJm/3/" rel="nofollow">fiddle</a> link again, and the full code:</p>
  
  <pre><code>var imgwidth = $('.cycle-slide img').width();
  var imgheight = $('.cycle-slide img').height();
  
  $('.cycle-slide').hover(function () {        
      $('.overlay', this).css('width', imgwidth).css('height', imgheight).fadeIn();
      }, function() {
      $('.overlay', this).fadeOut();
  });
  </code></pre>
  
  <p>How can I get <code>.overlay</code> to match each slide's image size?</p>
  
  <p>Many thanks in advance.</p>