Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Jan 31st, 2013  |  syntax: None  |  size: 6.02 KB  |  views: 23  |  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. <ul>
  2.     <li>
  3.         <div>
  4.             <img src="http://w3schools.com/css/klematis.jpg" />
  5.             <a href=""></a>
  6.         </div>
  7.         <h6>Name 1</h6>
  8.     </li>
  9.     .
  10.     .
  11.     .
  12. </ul>
  13.        
  14. $('li').hover(function() {
  15.     $(this).find('a').stop().animate({
  16.         'top': '0%'
  17.     }, 300);
  18. }, function() {
  19.     $(this).find('a').stop().animate({
  20.         'top': '100%'
  21.     }, 300);
  22. })​
  23.        
  24. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  25. <html xmlns="http://www.w3.org/1999/xhtml">
  26. <head>
  27.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  28.     <title>Scroll - Up - Down</title>
  29.     <!-- SCRIPTS -->
  30.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.     <script type="text/javascript">
  32.     $(document).ready(function(){
  33.  
  34.         $(".scroll-up-down li").mouseover(function(){
  35.             $(this).find("span.hover-link").show();
  36.         });
  37.  
  38.         $(".scroll-up-down li").mouseout(function(){
  39.             $(this).find("span.hover-link").hide();
  40.         });
  41.  
  42.  
  43.     });
  44.     </script>
  45.     <!-- SCRIPTS -->
  46.  
  47.     <!-- STYLES -->
  48.     <style type="text/css">
  49.  
  50.         body                        { background:#CCC; font-family:Arial, Helvetica, sans-serif; }
  51.         h1                          { font-size:16px; text-align:center; }
  52.         .scroll-up-down             { border:1px dashed #bbb;  margin:0 auto; padding:0; text-align:center; width:400px; }
  53.         .scroll-up-down li          { display:inline-block; list-style:none; margin:10px; position:relative; text-align:center; width:100px; z-index:999; }
  54.         .scroll-up-down li span.hover-link              { background:url(hover-div.png) no-repeat;
  55.                                                           border:5px solid #000;
  56.                                                           color:#FFF;
  57.                                                           font-size:12px;
  58.                                                           font-weight:bolder;
  59.                                                           display:none;
  60.                                                           height:60px;
  61.                                                           left:0;
  62.                                                           list-style:none;
  63.                                                           padding-top:40px;
  64.                                                           position:absolute;
  65.                                                           filter: alpha(opacity=50);
  66.                                                           opacity: 0.5;
  67.                                                           text-align:center;
  68.                                                           top:0;
  69.                                                           vertical-align:bottom;
  70.                                                           width:100px;
  71.                                                           z-index:1000;
  72.  
  73.                                     }
  74.         .scroll-up-down li span.hover-link a.linkedin-icon { background:url(linked-icon.png) no-repeat 0 -50px;  display:inline-block; height:40px; width:40px; }
  75.         .scroll-up-down li span.hover-link a.linkedin-icon:hover { background-position:0 0;   display:inline-block; height:40px; width:40px; }
  76.         .scroll-up-down li a span   { font-size:12px; }
  77.         .scroll-up-down li a        { display:inline-block; text-decoration:none; }
  78.         .scroll-up-down li a img    { border:5px solid #000; height:100px;  width:100px; }
  79.  
  80.     </style>
  81.     <!-- / STYLES -->
  82. </head>
  83.  
  84. <body>
  85.     <h1> User Profiles Grid</h1>
  86.     <ul class="scroll-up-down">
  87.  
  88.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. ABC</span></a>
  89.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  90.         </li>
  91.  
  92.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. PQR</span></a>
  93.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  94.         </li>
  95.  
  96.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. XYZ</span></a>
  97.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  98.         </li>
  99.  
  100.  
  101.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. LMN</span></a>
  102.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  103.         </li>
  104.  
  105.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. DEF</span></a>
  106.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  107.         </li>
  108.  
  109.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. JKL</span></a>
  110.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  111.         </li>
  112.  
  113.  
  114.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. RST</span></a>
  115.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  116.         </li>
  117.  
  118.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. QWE</span></a>
  119.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  120.         </li>
  121.  
  122.         <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. YUI</span></a>
  123.         <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
  124.         </li>
  125.  
  126.  
  127.     </ul>
  128. </body>
  129. </html>
clone this paste RAW Paste Data