JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="zoom">
    <img src="http://placekitten.com/400/200" alt="" />
    <div class="zText">Lorem ipsum dolor sit amet.</div>
</div>


<div class="zoom">
    <img src="http://placekitten.com/200/200" alt="" />
    <div class="zText">Mauris a ipsum nec arcu hendrerit aliquam eu tempor ante. </div>
</div>


<div class="zoom">
    <img src="http://placekitten.com/50/50" alt="" />
    <div class="zText">Lorem ipsum dolor sit amet.</div>
</div>

CSS

body { margin: 40px; }

.zoom img {
    max-width: 100px;
    max-height: 100px;
}

.zoom,
.zoom img {
    float: left;
}

.zoom_wrap {
    float: left;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.zoom_wrap .zoom {
    background: #fff;
    overflow: hidden;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

.zText { 
    float: left; 
    display: none; 
    width: 100%; 
    padding-top: 10px; 
}

.zoom,
.zoom_wrap { margin: 10px;  }
.zoom_wrap .zoom { margin: 0px; }

.zoom_active img { width: 100%; }

.zoom_active .zoom { box-shadow: 0 0 10px #999; }

JavaScript

var zoomDistance = 10;

  
/*!
 * jQuery imagesLoaded plugin v2.0.1
 * http://github.com/desandro/imagesloaded
 *
 * MIT License. by Paul Irish et al.
 */
(function(c,n){var k="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(l){function m(){var b=c(h),a=c(g);d&&(g.length?d.reject(e,b,a):d.resolve(e));c.isFunction(l)&&l.call(f,e,b,a)}function i(b,a){b.src===k||-1!==c.inArray(b,j)||(j.push(b),a?g.push(b):h.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),o&&d.notifyWith(c(b),[a,e,c(h),c(g)]),e.length===j.length&&(setTimeout(m),e.unbind(".imagesLoaded")))}var f=this,d=c.isFunction(c.Deferred)?c.Deferred():
0,o=c.isFunction(d.notify),e=f.find("img").add(f.filter("img")),j=[],h=[],g=[];e.length?e.bind("load.imagesLoaded error.imagesLoaded",function(b){i(b.target,"error"===b.type)}).each(function(b,a){var e=a.src,d=c.data(a,"imagesLoaded");if(d&&d.src===e)i(a,d.isBroken);else if(a.complete&&a.naturalWidth!==n)i(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=k,a.src=e}):m();return d?d.promise(f):f}})(jQuery);

$('.zoom').each(function() {
    
    var obj = $(this),
        objI = $('img', obj),
        zText = $(".zText", obj),
        images = $('img').imagesLoaded();

    images.done( function( ){
        
        var objIW = objI.outerWidth(true),
            objIH = objI.outerHeight(true);
        
        obj.wrap('<div class="zoom_wrap"></div>');
            
        var objWrap = obj
                        .parents('.zoom_wrap')
                        .css({ width: objIW, height: ( objIH ) });
        
        var objT = $('.zText', obj),
            objTH = objT.outerHeight(true);
        
        obj.css({ width: objIW });
    
        objWrap.on({
            mouseenter: function() {
                
                objWrap.css({ zIndex: 2 }).addClass('zoom_active');
                
                obj.stop().animate({
                    padding: 10,
             ...