Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul>
- <li>
- <div>
- <img src="http://w3schools.com/css/klematis.jpg" />
- <a href=""></a>
- </div>
- <h6>Name 1</h6>
- </li>
- .
- .
- .
- </ul>
- $('li').hover(function() {
- $(this).find('a').stop().animate({
- 'top': '0%'
- }, 300);
- }, function() {
- $(this).find('a').stop().animate({
- 'top': '100%'
- }, 300);
- })
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Scroll - Up - Down</title>
- <!-- SCRIPTS -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".scroll-up-down li").mouseover(function(){
- $(this).find("span.hover-link").show();
- });
- $(".scroll-up-down li").mouseout(function(){
- $(this).find("span.hover-link").hide();
- });
- });
- </script>
- <!-- SCRIPTS -->
- <!-- STYLES -->
- <style type="text/css">
- body { background:#CCC; font-family:Arial, Helvetica, sans-serif; }
- h1 { font-size:16px; text-align:center; }
- .scroll-up-down { border:1px dashed #bbb; margin:0 auto; padding:0; text-align:center; width:400px; }
- .scroll-up-down li { display:inline-block; list-style:none; margin:10px; position:relative; text-align:center; width:100px; z-index:999; }
- .scroll-up-down li span.hover-link { background:url(hover-div.png) no-repeat;
- border:5px solid #000;
- color:#FFF;
- font-size:12px;
- font-weight:bolder;
- display:none;
- height:60px;
- left:0;
- list-style:none;
- padding-top:40px;
- position:absolute;
- filter: alpha(opacity=50);
- opacity: 0.5;
- text-align:center;
- top:0;
- vertical-align:bottom;
- width:100px;
- z-index:1000;
- }
- .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; }
- .scroll-up-down li span.hover-link a.linkedin-icon:hover { background-position:0 0; display:inline-block; height:40px; width:40px; }
- .scroll-up-down li a span { font-size:12px; }
- .scroll-up-down li a { display:inline-block; text-decoration:none; }
- .scroll-up-down li a img { border:5px solid #000; height:100px; width:100px; }
- </style>
- <!-- / STYLES -->
- </head>
- <body>
- <h1> User Profiles Grid</h1>
- <ul class="scroll-up-down">
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. ABC</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. PQR</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. XYZ</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. LMN</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. DEF</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. JKL</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. RST</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. QWE</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. YUI</span></a>
- <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon"> </a></span>
- </li>
- </ul>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement