我很难找到关于在鼠标悬停时放大图像,然后将放大的图像变暗以便我可以在其上放置一些文本的教程。
除了使图像变大之外,这个例子几乎做了所有事情: 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&height=220&cropratio=330:220&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 张图像。
最佳答案
您可以使用 jQuery 以多种方式执行此操作,其中之一是使用 animate()
方法平滑地更改图像大小:http://jsfiddle.net/FZG3v/44/
关于javascript - 悬停时放大图像并添加聚光灯文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16268681/