JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img id="image" src="https://s3.amazonaws.com/aspph-wp-production/app/uploads/2015/11/Hands.png" alt="Beach" />
</div>

CSS

div {
    width: 100px;
    height: 70px;    
    margin: 180px auto;
}

#image {
    width: 100px;
    height: 68px;
    cursor: pointer;
}

.preview {
    width: 500px;
    height: 338px;
    position: absolute;
    display: none;
}

JavaScript

$("#image").click(function () {
    var p = $(this).parent();
    p.append('<img src="' + $(this).attr("src") +
             '" alt="' + $(this).attr("alt") + '" class="preview" />');
    var i = $("img.preview", p);
    var maxWidth = i.width();
    var maxHeight = i.height();
    i.css({ width: $(this).width(), height: $(this).height() });
    i.css({ top: $(this).position().top, left: $(this).position().left });
    i.show();
    i.animate({ marginTop: -((maxHeight / 2) - (i.height() / 2)),
                marginLeft: -((maxWidth / 2) - (i.width() / 2)),
                width: maxWidth,
                height: maxHeight }, 800);
    return false;
});