マウスを画像の上に持っていくと画像がちょっと持ち上がって、画像の上からポインターが離れるともとに戻るスクリプトです。
http://niming538.hatenablog.com/entry/2014/03/06/165003
<h1>PopUp Image</h1> <div class="waku"> <img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164254.png" alt="" width="30%" /> <img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164436.png" alt="" width="30%" /> <img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164132.png" alt="" width="30%" /> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript">// <![CDATA[ $(".popimg").hover(function() { $(this).css("margin-top", "10px").css("margin-bottom", "30px"); }, function() { $(this).css("margin-top", "20px").css("margin-bottom", "20px"); }); // ]]></script>
これだけのスクリプトでこんなことができてしまうなんて、まるで手品のようです。