Mouse hover on image


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. .img {
  6. width:141px;
  7. }
  8. a {
  9. text-decoration:none;
  10. }
  11. a.crop-foto {
  12. height:116px;
  13. }
  14. .crop-foto {
  15. display:block;
  16. overflow:hidden;
  17. position:relative;
  18. }
  19. .crop-foto img {
  20. display:block;
  21. position:absolute;
  22. }
  23. .crop-foto:hover {
  24. border:3px solid;
  25. }
  26. .crop-foto:hover img {
  27. margin:-3px 0 0 -3px;
  28. }
  29. .corta.crop-foto:hover {
  30. border-color:#E70202;
  31. }
  32. .crop-116 a.crop-foto {height:116px;}
  33.  
  34. .crop-116 a.crop-foto:hover {height:110px;}
  35. a:hover.corta {color:#C00 !important}
  36. </head>
  37.  
  38. <div class="img crop-116"><a href="#" class="crop-foto corta"><img src="teste.png" /></a></div>
  39. </body>
  40. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.