Mouse hover Flip-image May 13, 2015 Get link Facebook Twitter Pinterest Email Other Apps index.html <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>flip-image</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <style> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 252px; float:left; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } .myimg { width:200px; height:200px; } .myimg img { width:100%; margin:auto; } .wrapper { padding:20px; margin:auto; background:#666666; overflow:auto; } .container { margin:auto; padding:10px; background:#999999; overflow:auto; } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } </style> </head> <body> <div class="wrapper"> <!--wrapper starts here--> <div class="container"> <!--container starts here--> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <!--flip class starts here--> <div class="flipper"> <!--flipper class starts here--> <div class="front"> <!--front class starts here--> <img class="myimg" src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png"> </div> <!--front class ends here--> <div class="back"> <!--back class starts here--> <img class="myimg" src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png"> </div> <!--back class ends here--> </div> <!--flipper class ends here--> </div> <!--flip class ends here--> <!--this is 2nd flipper starts here--> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <!--flip class starts here--> <div class="flipper"> <!--flipper class starts here--> <div class="front"> <!--front class starts here--> <img class="myimg" src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg"> </div> <!--front class ends here--> <div class="back"> <!--back class starts here--> <img class="myimg" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg"> </div> <!--back class ends here--> </div> <!--flipper class ends here--> </div> <!--flip class ends here--> <!--this is 3rd flipper starts here--> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <!--flip class starts here--> <div class="flipper"> <!--flipper class starts here--> <div class="front"> <!--front class starts here--> <img class="myimg" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div> <!--front class ends here--> <div class="back"> <!--back class starts here--> <img class="myimg" src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg"> </div> <!--back class ends here--> </div> <!--flipper class ends here--> </div> <!--flip class ends here--> </div> <!--container ends here--> </div> <!--wrapper ends here--> </body> </html> Comments
Comments
Post a Comment