直接上代码:
-
$(".img-hover").hover(
-
function(){
-
$(this).parent().width( $(this).parent().width());
-
$(this).parent().height( $(this).parent().height());
-
$(this).parent().css({ 'padding':"-10px" });
-
},
-
function(){
-
$(this).parent().removeAttr("style");
-
});
说明:
1、.img-hover为图片的类;
2、parent类必须设置一个padding,至少10px以上才有效果。
3、原理是:先定死上级div的高度和宽度,然后再放大图片。
示例html代码:
-
<div class="panel-heading">
-
<img class="img-responsive img-portfolio img-hover" src="/front/img/p1.jpg" alt="">
-
</div>
阅读(2245) | 评论(0) | 转发(0) |