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

【问题标题】：Enlarge image on hover and add spotlight text悬停时放大图像并添加聚光灯文本
【发布时间】：2013-04-29 07:36:31
【问题描述】：

我很难找到关于在鼠标悬停时放大图像的教程，然后将放大的图像变暗以便我可以在其上放置一些文字。

这个例子几乎做了所有事情，除了让图像变大： 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);
});

这是我的第一个问题，如果我不清楚或遗漏了一些信息，请道歉。

非常感谢您的帮助！

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

【问题讨论】：

你似乎有阴影工作，尝试CSS3转换scale以获得放大效果。

标签： javascript html css

【解决方案1】：

你可以使用 jQuery 来做很多事情，其中一种是使用animate() 方法来平滑地改变图像大小：http://jsfiddle.net/FZG3v/44/

【讨论】：

谢谢鬼！几乎完美！只是想弄清楚如何从中心放大图像（而不是从顶部，左侧）
您只需将top 和left 属性添加到animate()，类似于width 和height。更新代码：jsfiddle.net/FZG3v/45
非常感谢幽灵的帮助，非常感谢！
如果你能原谅我，最后一个 n00b 请求。我已经在我的网站上实现了您的代码，通过 CSS 调整了图像的大小，设置了信息文本的样式并将一张图像堆叠在另一张图像上以使第二行没有问题 - 它看起来很棒！但是，我很难尝试将下一个图像放在行中。（每 2 行 4 张图片）。
我更新了一个小提琴来解决图像重叠的问题。由于它们具有相同的 z-index，因此第二张图片显示在顶部 - jsfiddle.net/FZG3v/65