CODEWITHSUNDEEP
jquerycsscss-animations
user742030
user742030

Reputation:

How to Move an Image from Margin: Auto?

I'm working on a responsive site and I have looked all over the web with no prevail.

I am trying to animate an image that has it's margins set to auto initially and then animate it to a specific position (i.e. to: margin-top: 4px & margin-left: 30px). Anything I do that gets it moving jumps because of the margin set to auto - but the image needs to be responsively in the middle horizontally for mobile devices as its initial state and animate smoothly.

HTML:

<div class="logoWrapper">
    <img class="logo" src="some.png"/>
</div>

CSS:

.logo {
    display: block;
    width: 90px;
    height: 90px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}
.logoShrink {
    margin-top: 4px;
    width: 20px;
    height: 20px;
}
.logoWrapper {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 15;
}

jQuery:

jQuery('.logo').addClass('logoShrink');

I know this is an issue for many but nothing I can find works; Lets get a real solution here. Any help would be greatly appreciated. THNX!!

Upvotes: 1

Views: 1163

Answers (1)

peterh
peterh

Reputation: 1

I suggest to center the image with position: absolute and left: 50% and margin-left: -50%. It can be done because its parent is position: fixed.

.logo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    left: 50%;
    top: 90px;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}

After that, transitioning top, left and margin-left will do what you want.

Upvotes: 1

Related Questions