javascript - Changing margin on hover shifts all the things beneath it -

so have created simple animation using css when hover on image margin of image decreases give going effect problem coming when change margin, things beneath move. how can move image , not whole?

css:

.down_arrow {        margin: 15px;     -webkit-transition: margin 0.5s ease-out;     -moz-transition: margin 0.5s ease-out;     -o-transition: margin 0.5s ease-out; }  .down_arrow:hover {     margin-top: 2px; } 

html:

<div class="row text-center" style="margin-top: 30px;">     <img src="img/down_arrow.png" class="down_arrow" onclick="gotobyscroll('ideas_section');" /> </div> 

here's what's happening: jsfiddle.

give position , animate instead of margin:

demo

  .down_arrow {            margin: 15px;         top:0;         position:relative;         -webkit-transition: top 0.5s ease-out;         -moz-transition: top 0.5s ease-out;         -o-transition: top 0.5s ease-out;     }      .down_arrow:hover {         top: -12px;     }