JSFiddle - React, Tailwind, and code Playground

by Jorge Gutierrez

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div id="stage">
            <div class="pure-g">
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
                    <div data-sg-img-zoom data-sg-src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" data-sg-apa="APA Test Text!">            
                    </div> 
                    <p class="exp">One imgZoom zoom = true(default) APA</p>
                </div>
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
                    <div data-sg-img-zoom data-sg-src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" data-sg-apa="APA Test Text!">            
                    </div> 
                    <div data-sg-img-zoom="false" data-sg-src="http://distilleryimage11.ak.instagram.com/6cb6b5640ddf11e39ff222000aa8009c_7.jpg" data-sg-apa="APA Test Text!">            
                    </div>
                    <p class="exp">Two imgZoom in the same col zoom = true(default)/false APA</p>
                    <div class="pure-g"> 
                        <div class="pure-u-1-2 inp">
                            <div data-sg-img-zoom data-sg-src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" data-sg-apa="APA Loooooooooooooooooooooooooooong Test Text!">            
                            </div> 
                        </div>
                        <div class="pure-u-1-2 inp">
                            <div data-sg-img-zoom data-sg-src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" data-sg-apa="APA Loooooooooooooooooooooooooooong Test Text!">            
                            </div>   ...

CSS

* {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
#stage { padding: 0.5em; }
.pure-g > div{ padding: 0.5em; }
.exp { 
    display:table; 
    margin: 1em auto; 
    font-size: 0.7em; 
    color: #999; 
    letter-spacing: normal;
}
[class*=pure-u-] [data-sg-img-zoom] { width:100%; }
[data-sg-img-zoom]{
    border:6px solid #fff;
    display:inline-block;
    box-shadow:3px 3px 10px rgba(0,0,0,0.6);  
    position:relative;    
    overflow:hidden;
}
[data-sg-img-zoom] img {display:block; width:inherit;}
.zoomImg{
    position:absolute;
    bottom:0;
    right:0;
    background:url("http://www.amtum.org.mx/lupa.png") no-repeat;
    height:25px;
    width:25px;
    background-size:contain;
    cursor: pointer;
    z-index: 1;
}
.zoomImg:hover{ transform: scale(1.3); transform-origin:100% 100%;}
[data-sg-img-zoom] p{
    position:absolute;    
    background-color:rgba(0,0,0,0.6);
    color:#fff;
    text-shadow:1px 2px #000;
    font-size:12px;
    padding:3px 25px 3px 5px;
    width:100%;
    word-break: break-all;
    transition: bottom ease 0.5s;
    margin: 0;
    z-index: 0;
}
[data-sg-img-zoom]:hover p {bottom:0 !important;}
[data-sg-img-zoom] p:hover {bottom:0 !important;}

JavaScript

$(function(){
    console.log("DOM is ready!");
    var imgContainer = $("div[data-sg-img-zoom]");
    $.each(imgContainer,function(i,e) {
        var $me     = $(this),
            $meData = $me.data(),            
            $meApa  = $meData.sgApa,
            $meSrc  = $meData.sgSrc,
            $meZoom = $meData.sgImgZoom;
            //console.dir($meData);
        var imgZoom = $("<img src='" + $meSrc + "' />").appendTo($me);
        if (typeof $meZoom !== typeof undefined && $meZoom !== false) {            
            var zoomButon = $("<div class='zoomImg'></div>").appendTo($me); 
            $.each(zoomButon,function() {
                $(zoomButon)
                .attr('rel', 'gallery')
                .fancybox({                    
                    content : '<img src="' + $meSrc + '" class="fancybox-image"/>',
                    title: $meApa,
                    aspectRatio : true,
                    padding : 0,
                    helpers : {
                        title : {
                            type : 'outside'
                        }
                    }
                });
            });          
        }          
        if (typeof $meApa !== typeof undefined && $meApa !== false) {
            $meApa  = ($meData.sgApa) ? $meData.sgApa : "You must use APA text if data-sg-apa attr used";
            var apaContainer = $("<p>" + $meApa + "</p>").appendTo($me);            
            apaContainer.css("bottom","-" + apaContainer.outerHeight() + "px");
        }  
        // $.each($meData, function(i,v) {
        //     console.log(i + ' = ' + v + ' (' + typeof(v) + ')');
        // });         
    });    
});