JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />
<img class="content" src="http://placekitten.com/g/80/80" />

CSS

.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.content {
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
}

.content {
    width:80px;
}

JavaScript

$(document).ready(function(){
    $('.content').hover(function() {
        $(this).addClass('transition');
    
    }, function() {
        $(this).removeClass('transition');
    });
});