Advertisement
pusatdata

CSS: Ket Gambar Muncul jika Mouse Hover

Dec 29th, 2014
218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.88 KB | None | 0 0
  1. Sumber:
  2. http://www.the-art-of-web.com/css/textoverimage/
  3.  
  4. <head>
  5. <style type="text/css">
  6.  
  7. a.hovertext {
  8. position: relative;
  9. width: 500px;
  10. text-decoration: none !important;
  11. text-align: center;
  12. }
  13. a.hovertext:after {
  14. content: attr(title);
  15. position: absolute;
  16. left: 0;
  17. bottom: 0;
  18. padding: 0.5em 20px;
  19. width: 460px;
  20. background: rgba(0,0,0,0.8);
  21. text-decoration: none !important;
  22. color: #fff;
  23. opacity: 0;
  24. -webkit-transition: 0.5s;
  25. -moz-transition: 0.5s;
  26. -o-transition: 0.5s;
  27. -ms-transition: 0.5s;
  28. }
  29. a.hovertext:hover:after, a.hovertext:focus:after {
  30. opacity: 1.0;
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <p><a class="hovertext" href="#" title="The title attribute of the link appears over the image on hover"><img src="/images/css_textoverimage.jpg" width="500" height="309" border="0" alt=""></a></p>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement