MOUSE HOVER EFFECT March 20, 2015 Get link Facebook X Pinterest Email Other Apps <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Image Hover Effect</title> <style> /*Example 1*/ .ex1 img{ height: 100px; width: 100px; border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; } </style> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="ex1"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div> </body> </html> Image Zoom in hover effect <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Image Hover Effect</title> <style> #containerEx2 { clear: both; width: 300px; margin: 0 auto; min-height: 600px; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; } </style> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="containerEx2"> <div id="ex2"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div> </div> </body> </html> Image moving left right(rolling) <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Image Hover Effect</title> <style> .wrapper{ width:400px; float:left; } .ex4 { } .ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; } .ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } </style> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="wrapper"> <div class="ex4"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"></div> <div class="ex4"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"></div> <div class="ex4"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"> </div> </div> </body> </html> Comments
Comments
Post a Comment