Cycle2 (overlay slide one)

HTML

<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow item" 
			    data-cycle-timeout="3000"
			    data-cycle-speed="1"
			    data-cycle-slides="> div"
				data-cycle-auto-height=container
			    >

                    <div class="cycle-slide">
                        <img src="http://placehold.it/200x550/" />
                        <span class="overlay"></span>
					</div>

					<div class="cycle-slide">
                        <img src="http://placehold.it/250x250/" />
                        <span class="overlay"></span>
					</div>

					<div class="cycle-slide">
                        <img src="http://placehold.it/500x250/" />
                        <span class="overlay"></span>
					</div>

</div>

CSS

.cycle-slide {
    position:relative;
    width:100%;
}

img {
     display:block;
    max-width:100%;
}

.overlay {
    background:rgba(255,255,0,0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    display:none;
}

JavaScript

var imgwidth = $('.cycle-slide img').width();
var imgheight = $('.cycle-slide img').height();

$('.cycle-slide').hover(function () {        
    $('.overlay', this).css('1000',§ imgwidth).css('458', imgheight).fadeIn();
    }, function() {
    $(', this).fadeOut();
});