JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img class="test" src="http://placekitten.com/g/200/300" alt="" />

CSS

.sif-wrap { float: left; position: relative; }
.sif-wrap a { float: left; }

.sif-wrap .FaceLift { z-index: 5 !important; position: relative; }

.sif-wrap img { margin: 0px; padding: 0px; border: 0px solid; outline: none; float: left; }

.sif-corners, .sif-sides { 
    z-index: 2; 
    position: absolute;
}

.sif-link { 
    position: absolute; 
    z-index: 3;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}


.sif-large { margin: 48px; }

/* Corners */
.sif-large .sif-corners { width: 101px; height: 101px; float: left; }

.sif-wrap.sif-large .sif-top-right 
{ background-position: bottom left; top: -48px; right: -48px; }
.sif-wrap.sif-large .sif-bottom-right 
{ background-position: top left; bottom: -48px; right: -48px; }
.sif-wrap.sif-large .sif-bottom-left 
{ background-position: top right; bottom: -48px; left: -48px; }
.sif-wrap.sif-large .sif-top-left 
{ background-position: bottom right; top: -48px; left: -48px; }


/* Top - Bottom */
.sif-wrap.sif-large .sif-top, 
.sif-wrap.sif-large .sif-bottom 
{ height: 54px; float: left; }

.sif-large.sif-top 
{ background-position: top center; top: -48px; left: 8px; right: 8px; }
.sif-large .sif-bottom 
{ background-position: bottom center; bottom: -48px; left: 8px; right: 8px; }


/* Right - Left */
.sif-large .sif-right, .sif-large .sif-left { position: absolute; width: 54px; float: left; }

.sif-large .sif-right { background-position: center right; top: 8px;bottom: 8px;  right: -48px; }
.sif-large .sif-left { background-position: center left; top: 8px; bottom: 8px; left: -48px; }




.sif-wood-dark .sif-corners { background: url('http://photoshopmesta.net/sic/imageFramer/images/wood-dark-corners.png') no-repeat; }
.sif-wood-dark .sif-top, .sif-wood-dark, .sif-bottom { background: url('http://photoshopmesta.net/sic/imageFramer/images/wood-dark-top-bottom.png') repeat-x; }

.sif-wood-dark .sif-right, .sif-wood-dark .sif-left { background:...

JavaScript

(function($){
    $.fn.extend({
        test: function(options) {
 
            var defaults = {
                frame: 'wood-dark',
                size: 'large', // small, medium. large
                autoLink: true // .sif-link
            };
             
            var options = $.extend( defaults, options);
            
            return this.each(function() {
                  var obj = $(this),
                      objD = obj.data(),
                      o = $.extend(true, {}, options, objD );

                
                if ( o.frame === false ) {
                    var frame = '';
                }
                else {
                    var frame = 'sif-'+ o.frame;
                }
                
                if ( o.size === false ) {
                    var size = '';
                }
                else {
                    var size = 'sif-'+ o.size;
                }
                
                obj.wrap('<div class="sif-wrap '+ frame +' '+ size +'"></div>');
                    
                $('\
                    <a class="sif-link" href="'+ obj.attr('src') +'"></a>\
                    <span class="sif-top sif-sides"></span>\
                    <span class="sif-right sif-sides"></span>\
                    <span class="sif-bottom sif-sides"></span>\
                    <span class="sif-left sif-sides"></span>\
                    <span class="sif-top-right sif-corners"></span>\
                    <span class="sif-bottom-right sif-corners"></span>\
                    <span class="sif-bottom-left sif-corners"></span>\
                    <span class="sif-top-left sif-corners"></span>\
                ').insertBefore( obj );
                
                            
            });
        }
    });
})(jQuery);

$(document).ready(function() {
    $('.test').test();
});

$('img').on("click", function() {
    $(this).animate(function() {
        width: '100'
    }, 500 );
});