Cycle2 (overlay slide one)

by sambaldwin

HTML

<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow" 
			    data-cycle-fx="scrollHorz" 
			    data-cycle-timeout="0"
			    data-cycle-speed="100"
			    data-cycle-slides="> div"
			    data-cycle-next=".cycle-next"
			 
				data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
				data-cycle-auto-height=container
			    >
					<div class="cycle-slide">
                        <a href="#" class="cycle-next item">
                            <img src="http://placehold.it/350x250" />
                        <div class="overlay"></div>
                        </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;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

JavaScript

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

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