Posted By

ryarwood on 06/25/11


Tagged


Versions (?)

Fade In Title on Menu Images


 / Published in: jQuery
 

URL: https://www.travismathew.com/team/

Fades a title over the image

  1. <!-- CSS -->
  2.  
  3. <style type="text/css">
  4.  
  5. .pgaPhoto {
  6. width: 283px;
  7. height: 300px;
  8. position: relative;
  9. display: block;
  10. margin-bottom: 24px;
  11. }
  12.  
  13. .pgaTitle {
  14. width: 283px;
  15. height: 60px;
  16. background: url(../images/black2.png);
  17. position: absolute;
  18. left: 0px;
  19. top: 240px;
  20. }
  21.  
  22. .pgaTitle h2 {
  23. font-family: Arial, Helvetica, sans-serif;
  24. font-size: 21px;
  25. color: #FFF;
  26. text-align: center;
  27. font-weight: normal;
  28. margin: 15px 0px 10px 0px;
  29. padding: 0px 0px 0px 0px;
  30. text-transform: none;
  31. border-bottom: none;
  32. }
  33.  
  34. .pgaTitle h3 {
  35. font-family: Arial, Helvetica, sans-serif;
  36. font-size: 11px;
  37. color: #999999;
  38. text-align: center;
  39. font-weight: normal;
  40. margin: 0px 0px 0px 0px;
  41. padding: 0px 0px 0px 0px;
  42. }
  43.  
  44. </style>
  45.  
  46. <!-- SCRIPT -->
  47.  
  48. <script type="text/javascript">
  49.  
  50. /* you need jquery too! */
  51.  
  52. $(document).ready(function() {
  53. $(".pgaPhoto").hover(function() {
  54. $(this).find(".pgaTitle").stop().fadeTo(300, 1 , function() {
  55. });
  56. } , function() { //on hover out...
  57. $(this).find(".pgaTitle").fadeTo(300, 0);
  58. });
  59. });
  60.  
  61. </script>
  62.  
  63. <!-- HTML -->
  64.  
  65. <a href="/team/bubba/">
  66. <div class="pgaPhoto">
  67. <div class="pgaTitle" style="display: none;">
  68. <h2>Bubba Watson</h2>
  69. <h3>PGA Tour</h3>
  70. </div>
  71. <img src="/images/11team-bubba.jpg" width="283" height="300" />
  72. </div>
  73. </a>

Report this snippet  

You need to login to post a comment.