bootstrap spotlight

HTML

<article class="item">
        
            <header>
                <h1 class="title">Spotlight</h1>
            </header>
            
            <div class="content clearfix"><p>Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.</p>

<h2>Features</h2>

<ul class="check">
    <li>Create nicely animated image overlays</li>
    <li>Supports custom image or HTML content overlays</li>
    <li>5 different animation modes</li>
</ul>

<h2>Examples</h2>

<p>If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations – <code>fade</code>, <code>bottom</code>, <code>top</code>, <code>right</code> and <code>left</code>.</p>

<div>
    <a data-spotlight="on" data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="//placehold.it/200x150" style="position: relative; overflow-x: hidden; overflow-y: hidden; " class="spotlight">
        <img src="//placehold.it/200x150" width="180" height="120" alt="Spotlight Image">
    <div class="overlay-default" style="position: absolute; visibility: visible; width: 180px; height: 120px; top: 0px; left: 0px; opacity: 0; display: none; "><div></div></div></a>
    <a data-spotlight="effect:bottom;" data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="//placehold.it/200x150" style="position: relative; overflow-x: hidden; overflow-y: hidden; " class="spotlight">
        <img src="//placehold.it/200x150" width="180" height="120" alt="Spotlight Image">
        <div class="overlay" style="position: absolute; display: block; visibility: visible; width: 180px; height: auto; left: 0px; bottom: -40px; "><div>Custom Overlay (Bottom)</div></div>
    </a>
    <a data-spotlight="effect:right;" data-lightbox="transitionIn:elastic;transitionOut:elastic;"...

CSS

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after { content: ""; display: table;
}
.clearfix:after, .grid-block:after { clear: both
}
.grid-box { float: left
}
.width20 { width: 20%
}
.width25 { width: 25%
}
.width33 { width: 33.333%
}
.width50 { width: 50%
}
.wk-content>*:first-child { margin-top: 0
}
.wk-content>*:last-child { margin-bottom: 0
}
.wk-slideshow, .wk-slideshow
.slides { position: relative
}
.wk-slideshow .slides, .wk-slideshow
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideshow .slides>li { position: absolute
}
.wk-slideshow .nav
li { cursor: pointer
}
.wk-slideshow .nav
span { display: block
}
.wk-slideshow .next, .wk-slideshow
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideshow
.caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; background: rgba(0,0,0,0.5);
}
.wk-slideshow
.captions { display: none
}
.wk-slideshow .caption, .wk-slideshow .caption
a { color: #fff
}
.wk-slideshow .caption
a { text-decoration: underline
}
.wk-slideshow .wk-content > a:first-child, .wk-slideshow .wk-content > img:first-child, .wk-slideshow .wk-content>a:first-child>img { display: block
}
.wk-slideshow .slides > li > *, .wk-slideshow .slides>li>*>img { display: block
}
.wk-gallery
a { display: inline-block
}
.wk-gallery a>img:first-child { display: block
}
.wk-slideset
.sets { overflow: hidden
}
.wk-slideset .set, .wk-slideset
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideset
.set { display: none; position: relative; margin: 0 auto; text-align: center;
}
.wk-slideset .set:first-child { display: block
}
.wk-slideset .set>li { display: inline-block
}
.wk-slideset .nav
span { display: block; cursor: pointer;
}
.wk-slideset .next, .wk-slideset
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content>a:first-child>img { display:...

JavaScript

//SPOTLIGHT
(function(d) {
    var e = function() {};
    d.extend(e.prototype, {
        name: "spotlight",
        options: {
            effect: "fade",
            duration: 300,
            transition: "swing",
            cls: "spotlight",
            overlaySelector: ".overlay",
            overlayDefault: "overlay-default"
        },
        initialize: function(c, a) {
            a = d.extend({}, this.options, a);
            c.attr("data-spotlight") && d.each(c.attr("data-spotlight").split(";"), function(b, c) {
                var d = c.match(/\s*([A-Z_]*?)\s*:\s*(.+)\s*/i);
                d && (a[d[1]] = d[2])
            });
            var b = c.children(a.overlaySelector).first();
            b.length || (b = d("<div>").addClass(a.overlayDefault).appendTo(c));
            b.css({
                position: "absolute",
                visibility: "hidden",
                display: "block"
            }).wrapInner("<div>");
            c.css({
                position: "relative",
                overflow: "hidden"
            }).addClass(a.cls);
            c.bind({
                mouseenter: function() {
                    b.stop().css({
                        visibility: "visible",
                        width: c.width(),
                        height: a.effect == "top" || a.effect == "bottom" ? "auto" : c.height()
                    });
                    switch (a.effect) {
                    case "right":
                        b.css({
                            right: b.width() * -1,
                            top: 0,
                            bottom: 0
                        }).animate({
                            right: 0
                        }, a.duration, a.transition);
                        break;
                    case "left":
                        b.css({
                            left: b.width() * -1,
                            top: 0,
                            bottom: 0
                       ...