JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img src="http://placekitten.com/g/500/500" alt="Caption text">

CSS

/* Custom styling */
.sic {
    box-shadow: 0 0 10px #e1e1e1;
}

.sic-caption {
    color: #fff;
    background: hsla(2, 100%, 50%, 0.6);
    padding: 7px;
}


/* Necessary styles */
.sic {
    display: inline-block;
    position: relative;
}

.sic img { display: block; }

.sic-caption {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

JavaScript

(function($) {

    $.fn.sic = function( options ) {

        return this.each(function() {

            // A basket of blueberriess
            x = {},
            x.this = $(this),
            x.thisD = x.this.data(),
            x.o = $.extend( true, {}, $.fn.sic.defaults, options, x.thisD );

            
            // $.fn.myPlugin.destroy( x );

    /**/    typeof modules.generate_html == 'function' && modules.generate_html( x );
    /**/    typeof modules.dimensions == 'function' && modules.dimensions( x );
    /**/    typeof modules.styles == 'function' && modules.styles( x );
    /**/    typeof modules.events == 'function' && modules.events( x );


        }); // each();

    }; // sic();

    /*
    ===================
      DEFAULT OPTIONS
    ===================
    */
    $.fn.sic.defaults = {
        effect: 'slide',
        speed: 200,
        overflow: true
    }; // Default options


    // EFFECTS START HERE
    var modules = {
        generate_html: function( x ) {
            
            // Wrap in a parent div.sic
            x.this.wrap('<div class="sic" />');
            
            x.parent = x.this.parent('.sic'),
            x.captionText = x.this.attr('alt');

            // Append caption
            $('<div class="sic-caption">'+ x.captionText +'</div>').hide().appendTo( x.parent );
            
            x.caption = x.parent.find('.sic-caption');
            
        },
        dimensions: function( x ) {
            
            x.caption.height = x.caption.outerHeight( true );
            x.caption.data({ captionHeight: x.caption.outerHeight( true ) });
            
        },
        styles: function( x ) {

            x.o.overflow && x.parent.css({ overflow: 'hidden' });
            
        },
        events: function( x ) {
 
            // modules.effects[ x.o.effect ].onReady( x );
            x.o.onReady.call( x.caption )

            x.this.on("mouseenter mouseleave", function( e ) {
                
               ...