Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=windows-1250">
        <meta name="generator" content="PSPad editor, www.pspad.com">
        <title></title>
        <style type="text/css">
            body { text-align:center }
            .gallery { list-style: none; width: 600px; margin:0 auto  }      
            .gallery li {
                position: relative;
                margin: 0;
                overflow: hidden;
                float: left;
                display: inline;
            }
            .gallery li a {
                text-decoration: none;
                float: left;
            }
            .gallery li a img {
                width: 150px;
                height: 150px;
                float: left;
                margin: 0;
                border: none;
                padding: 10px;
​
​
            }
            .gallery li .magnifier {
                width:32px;
                height:32px;
                background: transparent url(http://cdn.iconfinder.net/data/icons/fatcow/32x32_0560/magnifier_zoom_in.png) no-repeat;
                position: absolute;
                right: 65px;
                bottom: 65px;
                font-size: 1.2em;
                color: #fff;  
                padding: 0;
            }
        </style>
    </head>
    <body>
        <ul class="gallery">
            <li>
                <a href="#"><img src="http://l.yimg.com/g/images/home_photo_aussiegall.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_orangeacid.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_welshboy.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_rappensuncle.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_nuomi.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_ende.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_codepoet.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_kk.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
            <li><a href="#"><img src="http://l.yimg.com/g/images/home_photo_xdjio.jpg" alt="" />
                    <span class="magnifier"></span></a>
            </li>
        </ul>
    </body>
</html>
 
​
 
​
$(function() {
    $('.gallery li').hover(function() {
        $(this).attr('class', 'current');
        $('.gallery li:not(.current)').stop().fadeTo(300, 0.25);
    },
    function() {
        $(this).removeClass('current');
        $('.gallery li').stop().fadeTo(150, 1.0);
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers