Flyout effect on image

Question

here is the link http://t3n.de/news/billig-rechner-intel-compute-stick-587589/

On left-side bottom-line of this page,there is a image like envelope. When you do hover on this image,the image is flyout. I am not sure what is called this effect? Actually i need this effect in project. How can i do that?

Answer 1

Please see this - which doesn't need to use jquery - just pure css!

But below is a simple example of what i think you're looking to achieve:

 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=""/> 

For vendor prefixes/compatibility, please click here

Answer 2

In jQuery you can do it like this:

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

CSS:

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

For hiding it again on scrolling:

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