弹出效果对图像的影响

Question

这是链接http://t3n.de/news/billig-rechner-intel-compute-stick-587589/

在此页面的左侧底行上，有一个像信封的图像。 当您将鼠标悬停在此图像上时，该图像将弹出。 我不确定这叫什么效果？ 实际上我在项目中需要这种效果。 我怎样才能做到这一点？

Answer 1

请查看此内容 -无需使用jquery-仅使用纯CSS！

但是下面是我想达到的简单示例：

 img{ margin-top:50px; /*for demo purposes*/ margin-left:50px; /*for demo purposes*/ transition: all 0.8s; } img:hover{ transform:scale(1.8); transform-origin: center bottom; } 

 <img src="http://placekitten.com/g/60/40" alt=""/> 

有关供应商前缀/兼容性，请单击此处

Answer 2

在jQuery中，您可以这样做：

$('.flyout').on('mouseenter', function(){
    $(this).animate({
        bottom: '0px'
    }); 
});

CSS：

.flyout{
    position: fixed;
    bottom: -70px;
    height: 70px;
}

为了在滚动时再次隐藏它：

$(document).on('scroll',function(){ 
    $('.flyout').animate({
         bottom: '-70px';
    });
});