Код:
<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="#">» 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>