Jquery reveal

Place text behind an image, hover over to reveal

by richlewis14

HTML

<ul class="hover_block">
            <li><a href="/"><img src="http://www.wilsoninfo.com/300x300.gif" alt="alt" /> Text</a></li>
            <li><a href="/"><img src="http://www.wilsoninfo.com/300x300.gif" alt="alt" /> Hi, I am some text</a></li>
        </ul>

CSS

ul.hover_block li{
            list-style:none;
            float:left;
            background: #fff;
            padding: 10px;
            width:300px; 
            position: relative;
            margin-right: 20px; }

        ul.hover_block li a {
            display: block;
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 268px;
            padding: 16px;
            color: #000;
            font: 1.6em/1.3 Helvetica, Arial, sans-serif;
        }

        ul.hover_block li a { text-decoration: none; }

        ul.hover_block li img {
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
        }

JavaScript

$(function() {
            $('ul.hover_block li').hover(function(){
                $(this).find('img').animate({top:'182px'},{queue:false,duration:500});
            }, function(){
                $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
            });
        });