Mouse-Hover-Effect March 20, 2015 Get link Facebook Twitter Pinterest Email Other Apps Hover Effect Use this Code For Above Effect <!DOCTYPE html> <html > <head> <style type="text/css"> .box { width: 150px; border: 4px solid #333; padding: 10px; } .box p{ text-align:center; } .box a{ text-align:center; color:#333333; text-decoration:none; } .box a:hover{ color:#006699; text-align:center; text-decoration:none; } .box:hover { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 10px #ccc; box-shadow: 5px 5px 5px #ccc; border: 10px solid #999999; } </style> </head> <body> <div class="box"> <a href="#"><p> Hover Effect</p> </a></div> </body> </html> Image Hover effect Use this Code For Above Effect <!DOCTYPE html> <html > <head> <style type="text/css"> .imgBox { width: 441px; height: 248px; background:url(http://curdweb.com/navin/click.com/images/click-tiger.png) no-repeat; } .imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; border:2px solid #333333; } </style> </head> <body> <div class="imgBox"> </div> </body> </html> See opacity effect on image Use this Code For Above Effect <!DOCTYPE html> <html > <head> <style type="text/css"> .pic { width:300px; height:300px; opacity: 1; filter: alpha(opacity=100); background:url(http://curdweb.com/navin/click.com/images/click-tiger.png) no-repeat; } .pic:hover { opacity: 0.3; filter: alpha(opacity=30); } </style> </head> <body> <div class="pic"> </div> </body> </html> Image Information display on hover effect You can use as background image in hover div also you can use background image in main div Use this Code For Above Effect <!DOCTYPE html> <html> <head> <style type="text/css"> .pic { width:400px; height:217px; background:url(http://curdweb.com/navin/click.com/images/click-tiger.png) no-repeat; } .text { width:340px; height:217px; background:#FFF; opacity:0; } .pic:hover .text { opacity:0.6; text-align:justify; color:#000000; font-size:20px; font-weight:700; font-family:"Times New Roman", Times, serif; padding:30px; } </style> </head> <body> <div class="pic"> <div class="text"> You can use as background image in hover div also you can use background image in main div </div> </div> </body> </html> Comments
Comments
Post a Comment