JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<section class="photo-grid">
        <ul class="grid">
            <li data-name="Ruud Van Haag"><img class="photo" src="http://www.designcrowd.com/img/blog/google.png" li>
            <li data-name="Ruud Van Haag"><img class="photo" src="http://www.designcrowd.com/img/blog/google.png" alt="" /></li>
            (...)
            <li data-name="Ruud Van Haag"><img class="photo" src="http://www.designcrowd.com/img/blog/google.png" alt="" /></li>
            <li class="clear"></li>
        </ul>
<section>

CSS

.anim-photo {

    position: absolute;
    top: 0; left: 0;

    z-index: 5;
}

.anim-photo,
.transition {
    -webkit-transition: -webkit-transform 0.5s ease;  /* Safari 3.2+, Chrome */
       -moz-transition: -moz-transform 0.5s ease;  /* Firefox 4-15 */
         -o-transition: -o-transform 0.5s ease;  /* Opera 10.5–12.00 */
            transition: transform 0.5s ease;  /* Firefox 16+, Opera 12.50+ */
}

.grid .zoom {
    -webkit-transform: scale(1.2);  /* Safari 3.1+, Chrome */
       -moz-transform: scale(1.2);  /* Firefox 3.5+ */
        -ms-transform: scale(1.2);  /* IE9+ */
         -o-transform: scale(1.2);  /* Opera 10.50+ */
            transform: scale(1.2);
}

.grid li {
    list-style: none;
    float: left;
    width: 50px;
    height: 50px;
    background: #000;

    position: relative;

    cursor: pointer;

}

.grid .clear {
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

JavaScript

$(function(){
    $(".photo").click(function(){
    $(".photo").addClass("anim-photo");    
    });
    });