Flippy Plugin demo

http://blog.guilhemmarty.com/flippy

by Maulik Anand

HTML

<script src="//blog.guilhemmarty.com/flippy/jquery.flippy.min.js"></script>
<div class="flippy_container">
	<div id="hamflipbox">
        <img id="ham" class="cover" src="http://placekitten.com/141/219" />
	</div><!-- .flipwrap -->
</div><!-- .flippy_container -->

CSS

#hamflipbox{width:141px;height:219px;}
.flippy_container{margin-top:50px;margin-left:50px;}
.cover{box-shadow:3px 3px 5px;}

JavaScript

/***********************************************************
    Flippy Plugin:  https://github.com/lepixel/flippy/
                    http://blog.guilhemmarty.com/flippy/
************************************************************/
$('#hamflipbox').hover(
    function(){
        $('#hamflipbox').flippy({
            duration: "300",
            depth: "2", //3 has no depth, 0.12 has MUCH depth
            verso: '<img id="ham2" class="cover" src="http://placekitten.com/141/218"/>',
            recto: '<img class="cover" src="http://placekitten.com/141/219" />',
            onReverseStart: function(){
                alert('hiiii');
            }
        });
    }
);