JSFiddle - React, Tailwind, and code Playground

by dimadima

HTML

<img id="1" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQvthlt8I6d_PoAamUWeH17e8ClFQaZe-w-TaSRo_IPCsVmvwh_" />
<img id="2" src="http://l.yimg.com/bt/api/res/1.2/DmaSjP8a6MCED1x_CCME5g--/YXBwaWQ9eW5ld3M7Zmk9aW5zZXQ7aD0zNTM7cT04NTt3PTUxMg--/http://media.zenfs.com/en_us/News/ap_webfeeds/70be4b81db8e5e072b0f6a706700eace.jpg" />

CSS

img {
    -webkit-transition: 0.5s;
    border: 10px solid red;
    width: 275px;
}

img.bunghole {
    border: 55px solid black;
    width: 400px;
    -webkit-transform:rotate(63deg);
}

JavaScript

var image1 = $('img#1');
var image2 = $('img#2');
image1.on('mouseenter', $.proxy(function() {
    this.addClass('bunghole');
}, image))

image1.on('mouseleave', $.proxy(function() {
    this.removeClass('bunghole');
}, image))