advanced code snippet search

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

Expand | Embed | Plain Text 
  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.