Image Mouse Over Effect using CSS3 and jQuery. This mouseover effect it really very attracts the visitor to see your website. it will help to create high professional web design. Learn this simple mouse effect code. For quick view have a look at a live demo.
Html & Jquery code
<html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> </head> <body> <div class="image-wrapper"> <a href="#"> <img alt=" Banner 02" src="laptop.jpg"> </a> </div> <script> $('.image-wrapper').hover(function() { $(this).removeClass('hoverOut').addClass('hoverIn'); }, function() { $(this).removeClass('hoverIn').addClass('hoverOut'); }); </script> </body> </html>
CSS Code
<style> .image-wrapper { width: 366px; height: 246px; background: #fff; overflow: hidden; position: relative; border: 1px solid #ddd; } .image-wrapper a:before { top: -42px; height: 0; z-index: 2; content: ""; width: 100%; display: block; position: absolute; box-shadow: 0 0 80px 5px #fff; -webkit-transition: top 900ms linear 0s; -moz-transition: top 900ms linear 0s; -ms-transition: top 900ms linear 0s; transition: top 900ms linear 0s; } .image-wrapper.hoverIn a:before{ -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } .image-wrapper.hoverOut a:before { top: 100%; margin-top: 42px; } </style>
"We should not give up and we should not allow the problem to defeat us."
- A. P. J. Abdul Kalam
- A. P. J. Abdul Kalam
Related Topics
- CSS3 image zoom fade effect
- CSS3 text animation effect
- CSS3 image rotate animation effect
- Codeigniter load CSS and Javascript files.
- Facebook Style Drop Down Log out Menu
- Facebook style login system using Mysqli and CSS
- How to create custom search engine
- CSS style input box design coding
- Twitter style compose box
No comments:
Post a Comment