彈出效果對圖像的影響

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';
    });
});