Cycle2 (overlay slide one)

by sambaldwin

HTML

<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow item" 
			    data-cycle-fx="scrollHorz" 
			    data-cycle-timeout="3000"
			    data-cycle-speed="100"
			    data-cycle-slides="> div"
			    data-cycle-next=".cycle-next, .overlay"
			 
				data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
				data-cycle-auto-height=container
			    >
					<span class="overlay"></span>
                    
                    <div class="cycle-slide">
                        <a href="#" class="cycle-next">
                            <img src="http://placehold.it/650x550" />
                        </a>
					</div>

					<div class="cycle-slide">
                        <a href="#" class="cycle-next">
                            <img src="http://placehold.it/250x250" />
                        </a>
					</div>

					<div class="cycle-slide">
                        <a href="#" class="cycle-next">
                            <img src="http://placehold.it/250x250" />
                        </a>
					</div>
</div>

CSS

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

img {
 display:block;
}

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

JavaScript

var speed = 200;
	$(".item").hover(function () {
        $(".overlay", this).fadeIn(speed);
        }, function() {
        $(".overlay", this).fadeOut(speed);
    });

	$(".item").click(function () {
        $(".overlay", this).hide();
    });   

$(document).ready (function () {

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

    $(".overlay").css("width", imgwidth);
    $(".overlay").css("height", imgheight);
    
});