http://uploads.ru/i/2/y/d/2ydcV.jpg
DEMO
HTML-верх:

Код:
<style type="text/css">

a {
	color:#4de2e0;
	text-decoration:none;
	}
#container {
	width:450px;
	height:150px;
	position:relative;
	overflow:hidden;
	z-index:0;
	padding:0;
	margin:0 auto;
	background-image:url(http://www.htmldrive.net/edit_media/2010/201010/20101013/image_slide/images/nemo.jpg);
	border:10px solid #414141;
	}
#container:hover {
	border-color:#303030;
	}
#overlay {
	background-color:#000;
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:450px;
	height:150px;
	z-index:1;
	}
#hover {
	width:400px;
	display:block;
	height:100px;
	position:absolute;
	z-index:3;
	padding:25px;
	}
#hover p {
	color:#fff;
	font-weight:normal;
	}
</style>


<body>

<div id="container">

	<div id="overlay">
    </div>
    <div id="hover">
        <h1>Cool hovering slide effect!</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p><a href="#">&raquo; Read more</a>More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a></p>
    </div>

</div>


</body>

HTML-низ:

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
	
	var colour = $("#overlay");
	var content = $("#hover");
	
	content.hide();
	colour.hide();	
    
	$("#container").hover(function() {
    content.stop().show().css({ "left" : "-450px" }).animate({left : 0}, 300);
    colour.stop().fadeTo(500, .7)
	}
	,function() {
    content.stop().animate({left : 450}, 300);
    colour.stop().fadeTo(500, 0)
	});
});

</script>