JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<link rel="stylesheet" href="http://joonas.me/_1/sic/sic/sic.css">
<script src="http://joonas.me/_1/sic/jquery.TouchSwipe.js"></script>
<script src="http://joonas.me/_1/sic/sic/sic.js"></script>
<div id="myImages">
        
    <img src="http://lorempixel.com/100/200/" alt="My caption" />
    
</div>

CSS

.sicWrap { margin: 20px; }

#myElem { 
    width: 100px;
    position: absolute;
    z-index: 33;
    top: 0px;
    left: 0px;
    background: rgba( 0, 0, 0, 0.5 );
    padding: 8px;
    display: none;
}

JavaScript

$('#myImages img').sic({

    custom: {
        ready: function() {
            $('<div id="myElem">YAY</div>').appendTo(this);
        },
        eIn: function() {
            $(this).find('#myElem').fadeIn(300);
        },
        eOut: function() {
            $(this).find('#myElem').fadeOut(300);
        }
    }
    
});