JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="item"> <a href="#">
            <img src="http://jquery4u.com/images/penguin.jpg" />
        </a> 
    </li>
    <li class="item"> <a href="#">
            <img src="http://jquery4u.com/images/penguin.jpg" />
        </a> 
    </li>
    <li class="item"> <a href="#">
            <img src="http://jquery4u.com/images/penguin.jpg" />
        </a> 
    </li>
    <li class="item"> <a href="#">
            <img src="http://jquery4u.com/images/penguin.jpg" />
        </a> 
    </li>
</ul>

CSS

/* ---- CSS3 element transition on hover ---- */

/* transition speed */
 .transition-transform {
    /* ease-in-out */
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    /*   
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform .2s ease-in-out;
    -o-transition: -o-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
*/
}
/* IE 9 scale */
 .ie9 .transition-active {
    -ms-transform: scale(1.2, 1.2) rotate(360deg);
}
/* IE 8 scale */
 .ie8 .transition-active {
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
}
/* modern browsers transition */
 .transition-active {
    -webkit-transform: scale(1.2) rotate(360deg) translate3d(0, 0, 0) translateZ(0);
    -moz-transform:scale(1.2) rotate(360deg);
    -o-transform:scale(1.2) rotate(360deg);
    transform:scale(1.2) rotate(360deg);
    z-index: 1001;
}
/* IE 7 scale */
 .ie7 .transition-active {
    filter: none;
    transform: none;
}


/* demos styles only */
li {
    float:left;
    margin: 20px;
}
img {
    width: 150px;   
}

JavaScript

(function ($) {

    /*
        jQuery Plugin: jQuery Hover Transform
        Author: Sam Deering

        Requires: jQuery v1.9.1 or later
        @version: 1.0  19-FEB-2013

        Features:
        + CSS3 Transition Tranforms on Hover triggered by JavaScript.
        + Cross Browser supported by IE8, IE9 and modern browsers compliant with CSS3
          transitionopts.
        + Keyboard tab to active element captured and triggers hover state.
        + Specify child elements for CSS3 transformation effects on parent hover.
        + CSS transitions specified in CSS so they can be anything you want! :)
    */

    $.fn.hoverTransform = function (options) {

        /*
           Default setting.
        */
        var defaults = {

            childTriggerElements: '', //child elements that (hover) trigger transforms

            childTransitionElements: '', //child elements that transform

            transitionContainerClass: 'transition-container', //transition container class

            transitionBaseClass: 'transition-transform', //effect easing class

            transitionHoverClass: 'transition-active', //hover effect class

            selfTrigger: true, //self element triggers transform on hover

            selfTransition: true, //self element transforms on hover

            autoTabIndex: false //elements are given an incremented tab index

        }


        /*
            User specified settings.
        */
        var opts = $.extend({}, defaults, options);


        /*
           Get key code.
        */
        function getKeyCode(key) {
            //return the key code
            return (key == null) ? event.keyCode : key.keyCode;
        }

        /*
            For usabiity capture keyboard tabbing and trigger hover event.
        */
        $(document).on('keyup', function (eventObj) {
            //tab keycode = 9
            if (getKeyCode(eventObj) == '9') {
                var $el = $(document.activeElement);
               ...