JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<script src="http://webmuch.com/demos/jquery_image_flip/flip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<body>
<div id="container">
	<h1>Image Flip Illusion Using jQuery</h1>

    <img id="image1" width="300"  src="http://webmuch.com/demos/jquery_image_flip/images/image1.jpg" />
    <img id="image2" width="300"  src="http://webmuch.com/demos/jquery_image_flip/images/image2.jpg" />
    <img id="reflection1" width="300" src="http://webmuch.com/demos/jquery_image_flip/image.php?img=images/image1.jpg" />
    <img id="reflection2" width="300" src="http://webmuch.com/demos/jquery_image_flip/image.php?img=images/image2.jpg" />
    <img id="base" src="http://webmuch.com/demos/jquery_image_flip/images/base.png" />
</div>
</body>

CSS

body{background-color:#000;}
#page{margin:0px auto;height:50px; width:400px;}
h1{color:#FFFFFF; font-family:Arial; font-size:24px; font-weight:bold;}
#container{width:400px; margin:0px auto;height:380px; margin-top:50px}
#image1{position:absolute; z-index:3; cursor:pointer; width:300px; height:190px;}
#image2{display:none; position:absolute; z-index:2; cursor:pointer;}
#reflection1{position:absolute; margin-top:191px;
/* Cross Browser Opacity */
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
#reflection2{display:none;position:absolute;margin-top:191px; 
/* Cross Browser Opacity */
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
#base{position:absolute;margin:110px 0 0 -100px; z-index:1;}