jquery - 悬停对图像的影响(jquery/javascript)

Question

我想要一个与本网站首页图片类似的悬停效果:http://www.arken.dk/default.aspx我已经制作了具有悬停效果的 html 和 css，但是由于悬停类一次只适用于一张图像，因此位置的变化一次只会适用于一张图像。据我所知，每当只有一个图像悬停时，我将需要一些脚本来更改所有图像的 css。此外，它不应该只是悬停效果。在网站上，即使图像不再悬停，图像的位置仍保持不变？

有人知道如何执行此操作，或者可能有指向教程等的链接吗？

我不确定这个效果叫什么，所以我没能在谷歌上找到任何有用的东西:(

提前致谢:)

Answer 1

工作示例:http://jsfiddle.net/SBpzX/2/

<div id="container">  
    <div class="text">one</div>
</div>    

js

$(document).ready(function() {
    $('.text').hide();
    $('img').animate({
        opacity:1

    });

    $('img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
        $('.text').fadeIn();

    }, function() {
        $(this).stop().animate({opacity:1},500)
        $('.text').fadeOut();
    });


});

CSS

img
{    
    position:absolute;
    left:0;
    top:0;
}

#container {
    width: 400px;
    height: 267px;
}

.text {
    color: black;
    position: relative;
    text-align: center;
    top: 50%;
    font-family: Arial, Verdana;
    color: #000;
    font-size: 5em;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
}