Question

我很难找到关于在鼠标悬停时放大图像的教程，然后将放大的图像着色为暗，这样我就可以在上面添加一些文字了。

除了使图像变大之外，这个例子几乎可以做任何事情： http://jsfiddle.net/balupton/FZG3v/

CSS：

.ih { position:relative; }
.ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
.ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
.ih-info { z-index:501;background:black;color:white; }

HTML：

<img class="ih-image" src="http://designsnack.com/screenshots/image.php width=330&amp;height=220&amp;cropratio=330:220&amp;image=/screenshots/8264948088.jpg"/>
     <div class="ih-info">
         Your overlay content
     </div>
</div>

JS：

$(function(){
$('.ih').hover(
    // Over
    function(){
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
    },
    // Out
    function(){
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);
    }
).find('.ih-info').css('opacity',0);
});

这是我的第一个问题，如果我不清楚或缺少某些信息，请道歉。

非常感谢您的帮助！

编辑：谢谢鬼！我的最终目标是从中心放大图像，最终在4X2配置中将有4个图像。

Answer 1

您可以使用jQuery执行此操作，其中一种方法是使用animate()方法平滑更改图像大小：http://jsfiddle.net/FZG3v/44/

在悬停时放大图像并添加聚光灯文本

1 个答案: