JSFiddle - React, Tailwind, and code Playground

by mkuklis

HTML

<img id="img1" src="http://www.giftrocket.com/images/home/icons/football.png" />
<img id="img2" src="http://www.giftrocket.com/images/home/icons/sunglasses.png" />
<img id="img3"
src="http://www.giftrocket.com/images/home/icons/ipod.png" />

CSS

img {
    position: absolute;
    width: 60px;
}

#img1 {
  top: 120px;
  left: 100px;
}

#img2 {
  top: 30px;
  left: 140px;
}

#img3 {
    top: 220px;
    left: 100px;
}

JavaScript

$('img').bind({
    mouseover: function () {
      $(this).animate({
        height: "120",
        width: "120",
        left: "-=30",
        top: "-=30"}, 200);
    },
    mouseout: function () {
      $(this).animate({
        height: "60",
        width: "60",
        left: "+=30",
        top: "+=30"}, 200);
    }
});