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>
<head>
    <title>Test</title>
    <style type="text/css">
        #items {
            padding:0px;
            display:block;
        }
        #items .item {
            display:block;
            position:relative;
            float:left;
            width:200px;
            max-width:200px;
        }
        #items .item a {
            display:block;
            text-decoration:none;
            position:relative;
        }
        #items .name a:hover {
            color: #000;
        }
        #items .item .name {
            display: none;
            background-color: #000;
            color: #fff;
            position: absolute;
            left: 0px; top: 0px;
            margin: 0px;
            width: 100%; height: 100%;
        }
    </style>
</head>
<body>
​
    <div id="container">
        <section id="items">
            <figure class="item">
            <a href="http://google.com/" title="Thumb"><img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /></a>
                <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption>
            </figure>
            <figure class="item">
            <a href="http://google.com/" title="Thumb"><img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /></a>
                <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption>
            </figure>
        </section>
    </div>
​
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    
    <!-- rollover script -->
    <script type="text/javascript">
        $(document).ready(function(){
            $('.item').hover(function(){
                $(this).children('.name').stop().fadeTo(100, .5);
            },function(){
                $(this).children('.name').stop().fadeTo(900, 0);
            });
        });
    </script>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers