JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumb">
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <span> Caption</span>
</div>
<div class="thumb">
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <span> Caption</span>
</div>
<div class="thumb">
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <span> Caption</span>
</div>
<div class="thumb">
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <span> Caption</span>
</div>

CSS

.thumb {
    display: inline-block;
    width: 150px;
    height: 200px;
    border: 1px #000 solid;
}
.thumb img { width: 150px; height: 180px; position: absolute; }

JavaScript

$(".thumb").on("click", function() {
    $(".thumb").children("img").width("150px");
    $(this).children("img").css({
        width: "auto",
        zIndex: "2"
    });
});

$(window).click(function(e) { 
    if(($(e.target).is(".thumb") || $(e.target).parents().hasClass("thumb")) == false) 
        $(".thumb").children("img").width("150px");
});