Advanced Search

Mouse hover on image

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

Expand | Embed | Plain Text

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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style>
  7. .img {
  8. 	width:141px;
  9. }
  10. a {
  11. 	text-decoration:none;
  12. }
  13. a.crop-foto {
  14. 	height:116px;
  15. }
  16. .crop-foto {
  17. 	display:block;
  18. 	overflow:hidden;
  19. 	position:relative;
  20. }
  21. .crop-foto img {
  22. 	display:block;
  23. 	position:absolute;
  24. }
  25. .crop-foto:hover {
  26. 	border:3px solid;
  27. }
  28. .crop-foto:hover img {
  29. 	margin:-3px 0 0 -3px;
  30. }
  31. .corta.crop-foto:hover {
  32. 	border-color:#E70202;
  33. }
  34. .crop-116 a.crop-foto {height:116px;}
  35.  
  36. .crop-116 a.crop-foto:hover {height:110px;}
  37. a:hover.corta {color:#C00 !important}
  38. </style>
  39. </head>
  40.  
  41. <body>
  42. <div class="img crop-116"><a href="#" class="crop-foto corta"><img src="teste.png" /></a></div>
  43. </body>
  44. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.