JSFiddle - React, Tailwind, and code Playground

by spmbt

HTML

<aside id="advertisement">
<div>
<img src="http://inst.eecs.berkeley.edu/~cs184/sp12/assignments/Archive/HW6/HW6%20%20Ray%20Tracing%20Extension%20-%20Loc%20Do%27s%20Portfolio_files/7145976433_8aa3db043a.jpg"/>
<p>Экономьте электричество</p>
</div>
<div>
<img src="http://inst.eecs.berkeley.edu/~cs184/sp12/assignments/Archive/HW6/HW6%20%20Ray%20Tracing%20Extension%20-%20Loc%20Do%27s%20Portfolio_files/7145976329_eccecab1d0.jpg"/>
<p>Хороший язык</p>
</div>
<div>
<img src="http://inst.eecs.berkeley.edu/~cs184/sp12/assignments/Archive/HW6/HW6%20%20Ray%20Tracing%20Extension%20-%20Loc%20Do%27s%20Portfolio_files/6999889392_0a9a62b8a6_z.jpg"/>
<p>Чья палка больше</p>
</div>
</aside>

CSS

aside{margin: 100px}
aside div{width: 200px; border:1px solid #fff;
    height: 130px}
aside div img{position: relative;
    display:block;
    width: 100px;
    height: 100px}

JavaScript

$('#advertisement div img').on({mouseover:function(){
$(this).stop().animate({width:'130px',height:'130px',margin:'-15px'}, 300)}
  ,mouseout:function(){ $(this).stop().animate({width:'100px',height:'100px',margin:0}, 300)}
  ,click:function(){var wO = open(this.src,'wo')}
});