CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

Changing margin on hover shifts all the things beneath it

So I have created a simple animation using CSS which is that when I hover over an image the margin of the image decreases so as to give a going up effect but the problem coming is that when I change the margin, all the things beneath it also move. How can I only move the image and not the 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.

Upvotes: 1

Views: 3707

Answers (4)

BSK-Team
BSK-Team

Reputation: 1810

Add au div with à fixed height arroud the img.

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

Upvotes: 2

James Montagne
James Montagne

Reputation: 78710

Just adjust the bottom margin to compensate:

http://jsfiddle.net/fQpBV/12/

.down_arrow:hover {
    margin-top: 2px;
    margin-bottom: 28px;
}

Upvotes: 0

Anubhav
Anubhav

Reputation: 7218

here is an updated fiddle. appropriately set the bottom padding/margin too on hover

http://jsfiddle.net/fQpBV/6/

Upvotes: 1

Turnip
Turnip

Reputation: 36722

Give it a position and animate that instead of the 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;
    }

Upvotes: 2

Related Questions