JSFiddle - React, Tailwind, and code Playground

by narensrinivasans

HTML

<ul>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
    <li>thumb</li>
</ul>
<div id="transition"><div>zoom effect<div></div>

CSS

body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }

ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }

#transition {
    background:transparent;
    display:none;
    position:absolute; top:50%; left:50%; z-index:50;
}
#transition > div {
    background:#fff;
    border:1px solid #666;
    margin:-50px 0 0 -50px;
    width:100px; height:100px;
}

JavaScript

$('ul li').click(function(e){
    var $t = $('#transition'),
        to = $(this).offset(),
        td = $(document);
    
    $t.children('div').css({width:100,height:100});
    $t.css({
        top:  to.top + 50,
        left: to.left + 50,
        display: 'block'
    }).animate({
        top:  td.height()/2,
        left: td.width()/2
    }, 600, function(){
        $(this).animate({
            top: '-=75',
            left: '-=50'
        }, 600);
        $(this).children('div').animate({
            width:250,
            height:200
        }, 600, function(){
            // open dialog here
        });
    });
});

$('#transition').click(function(e){
    $(this).hide();
});