JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<a href="http://www.behance.net/gallery/s-e-n-s-u-a-l/222089">Photo by Joanna Kustra</a> CC-BY
<div class="demo01 demo">
    <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627435.jpg">
    <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627453.jpg">
    <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627470.jpg">
</div>

CSS

.demoImgDiv , .tongBg{
    margin:5px;
}
.demoImgDiv {  
    padding-left:40px;
}
.demo{margin-bottom:20px;clear:both;}
.tongBg{
    background:#000;
    float:left;
}
img{
    border:0px;
    cursor:pointer;
    width:150px;
}

JavaScript

(function($) {

    var _options = new Array();

    jQuery.fn.resipe = function(options) {
        _options[_options.length] = $.extend({}, $.fn.resipe.defaults, options);
        
        var idx = _options.length-1;
        var opt = _options[idx];
        
        $(this).each(function(){
            $(this).attr("idx", idx);
            $(this).fadeTo("fast", 0.8);
            $(this).wrap("<DIV class=tongBg></DIV>");
            
            $(this).parent().css("background", "#16c016");
            $(this).parent().css("width",  opt.imageWidth+"px");
            $(this).parent().css("height",  opt.imageHeight+"px");
            
        }).mouseenter(function(){
            $(this).stop();
            $(this).fadeTo(1000, 0.8);            
        }).mouseout(function(){
            $(this).stop();
            $(this).fadeTo(1000, 1);
        });
    }

 

})(jQuery);

$("div.demo01 img").resipe({});