Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Aug 14th, 2013  |  syntax: None  |  size: 1.72 KB  |  views: 25  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <div>
  2.  
  3.     <div>
  4.         <img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" />
  5.         <span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span>
  6.     </div>
  7.  
  8.     <div>
  9.         <img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" />
  10.         <span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span>
  11.     </div>
  12.  
  13.     <div>
  14.         <img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" />
  15.         <span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span>
  16.     </div>
  17.  
  18.     <div>
  19.         <img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" />
  20.         <span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span>
  21.     </div>
  22.  
  23. </div>
  24.        
  25. div {clear:both; padding:0 0 8px 0; border:none; width:576px;}
  26.  
  27. div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}      
  28.  
  29. div div img { padding:1px; cursor:pointer; display:block;}
  30.  
  31. div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif;  border:2px solid #FFF; font-size:12px; display:none;}
  32.  
  33. div div span img { position:absolute; bottom:-18px; left:34px;}
  34. div div span strong {font-size:14px; text-transform:uppercase;}
  35.        
  36. $.fn.hoverAnimation = function() {
  37.     return $(this).each(function() {
  38.         return $(this).hover(function() {
  39.             $(this).find("span").slideDown(100);
  40.             $(this).css("background-color", "#000");
  41.         }, function() {
  42.             $(this).find("span").slideUp(100);
  43.             $(this).css("background-color", "#B22222");
  44.         });
  45.     });
  46. }
  47.  
  48. $("div > div").hoverAnimation();
  49.        
  50. span {z-index:200}