JSFiddle - React, Tailwind, and code Playground

by MarkG76

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.spritely/0.6.1/jquery.spritely.min.js"></script>
<!-- a Spritely example. code and graphics by Rafael Gonzalves http://www.gonzalves.fr -->
<div class="thumb_wrap">
    <img src="http://www.gonzalves.fr/postpic/post_22.png" class="index_thumb" />
</div>

CSS

body {
    background-color: #2c2b2b;
}
.thumb_wrap {
    width:240px;
    height: 269px;
    float: left;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.index_thumb {
    width:240px;
    height: 269px;
    position: relative;
}
.index_thumb a:hover {
    position: relative;
    color:#000 !important;
}
.index_thumb img {
    position: relative;
    z-index: 10;
}
.thumb_wrap {
    background: transparent url(http://www.gonzalves.fr/wp-content/themes/gonzalvesmk3/img/animsprite3.png) 0 0 no-repeat;
}

JavaScript

$(document).ready(function () {
    $(".thumb_wrap img").fadeTo("fast", 0.2); // This sets the opacity of the thumbs when the page loads
    $(".thumb_wrap img").hover(function () {
        $(this).fadeTo("fast", 1.0); // This sets the opacity on hover	
    }, function () {
        $(this).fadeTo("fast", 0.2); // This sets the opacity on mouseout   		
    });
    $(".thumb_wrap").mouseover(function () {
        $(this).sprite({ fps: 30, no_of_frames: 14,play_frames: 7});
    });
    $(".thumb_wrap").mouseout(function () {
        $(this).sprite({ fps: 30, no_of_frames: 14, start_at_frame: 7, play_frames: 7});
    });
});