Simple page flip effect using Jquery, css and simple html

Simple page flip effect using Jquery, css and simple html, very easy to implement just copy paste the code below
This is the javascript part enter it inside the … section of your website.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Page Flip on hover
	$("#flipthepage").hover(function() {
		$("#flipthepage img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#flipthepage img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		$(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});	
});
</script> 

Now add the required style

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#flipthepage {
	position: relative;
	right: 0; top: 0;
	float: right; 
}
#flipthepage img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#flipthepage .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(http://mistonline.in/wp/demo/subscribe.png) no-repeat right top;
}
</style>

Now last but not least our HTML part

<div id="flipthepage">
		<a href="http://mistonline.in/wp"><img src="http://mistonline.in/wp/demo/page_flip.png" alt="" /></a>
		<div class="msg_block"></div>
</div>

DEMO