CODEWITHSUNDEEP
htmlcss
Artur Ryszka
Artur Ryszka

Reputation: 33

HTML and CSS3: How to make elements stay still

I'm testing CSS3 and right now I'm trying to use Transitions. THIS is the website I'm working on. If you hover your mouse over the first square on the top it transitions to the left. The problem is, since the 1st square moves, there's an empty space and the other squares are moving to it. I want those squares stay still when an object is moving. Is there any way to do so?

CSS

.container {
    margin: 0px auto;
    border: 2px;
    width: 545px;
    height: auto;
}

.title {
    margin: 0px auto;
    width: 600px;
    height: auto;
    text-align: center;
}

.elemento1 {
    float: left;
    width: 266;
    height: auto;
}

.elemento2 {
    float: right;
    width: 266;
    height: auto;
}

.foot {
    clear: both;
}

p.padding {
    padding-bottom: 15px;
    padding-top: 15px;
}

.anim {
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;
}

.anim:hover {
    width:100px;
    height:100px;
    transform: translate(-50px,0px);
    -ms-transform: translate(-50px,0px); /* IE 9 */
    -webkit-transform: translate(-50px,0px); /* Safari and Chrome */
    -o-transform: translate(-50px,0px); /* Opera */
    -moz-transform: translate(-50px,0px); /* Firefox */
}

Upvotes: 0

Views: 609

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

What you need to do is place the animated element in a wrapping element that already contains enough white-space for your animation to move around. That way it moves around INSIDE the wrapping element instead of bumping neighbours.

Upvotes: 3

Related Questions