Try this:
<style type="text/css">
#img_1
{ width:165px; height:190px; background:#fff url(images/8.jpg) no-
repeat; overflow:hidden; position:absolute; }
#img_1_box
{ position:absolute; width:165px; height:190px; }
#img_1_bg{
position:absolute;
z-index:9998;
width:165px; height:190px;
filter:alpha(opacity=50);
opacity:0.50;
background-color:#999;
}
#img_1_txt{
position:absolute;
z-index:9999;
width:165px; height:190px;
backgroundColor:transparent;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$img_1_box = $('#img_1_box');
$img_1_box.css({ top:150 }).hover(
function () {
$(this).animate({
top:50
},500);
},
function () {
$(this).animate({
top:150
},500);
}
);
});
</script>
<div id="img_1">
<div id="img_1_box">
<div id="img_1_bg"></div>
<div id="img_1_txt">
<h1>Praesent sed tortor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec
elementum interdum neque.</p>
</div>
</div>
</div>
On Nov 19, 8:47 am, "Armand Datema" <[EMAIL PROTECTED]> wrote:
> Hi
>
> I have to redesign a site to a new cms and Im running into troubles
> with the javascript, I want to redo this in jquery
>
> How would i create the following effect
>
> http://www.siriusplayground.nl/
>
> the 3 images with the sliding layers on them?
>
> thanks
>
> Armand
