Cycle2 (overlay slide one)

by sambaldwin

HTML

<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<div class="wrapper">
    <div class="cycle-slideshow" 
            data-cycle-timeout="5000"
            data-cycle-speed="1" 
            data-cycle-slides="> div" 
            data-cycle-next=".cycle-slide" 
            data-cycle-auto-height=container
    >
        <div class="cycle-slide">
            <img src="http://placehold.it/650x550" />
            <span class="overlay cycle-next">Click for next slide</span>
        </div>
        <div class="cycle-slide">
            <img src="http://placehold.it/250x250" />
            <span class="overlay cycle-next">Click for next slide</span>
        </div>
        <div class="cycle-slide">
            <img src="http://placehold.it/550x650" />
            <span class="overlay cycle-next">Click for next slide</span>
        </div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;    
}
.wrapper {
    width:100%;
}
.cycle-slide {
    position:relative;
    cursor:pointer;
}
img {
    display:block;
    max-width:100%;
    height:auto;
}
.overlay {
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    display:none;
    width:100%;
    height:100%;
    padding:1em;
}

JavaScript

// Overlay show / hide
$(".cycle-slide").hover(function () {
    $(".overlay", this).fadeIn(200);
}, function () {
    $(".overlay", this).fadeOut(200);
});

$(".cycle-slide").click(function () {
    $(".overlay").remove();
    // I would like this to permanently hide the overlay, so that it does not reappear again on hover
});