CODEWITHSUNDEEP
htmlcsscss-transitions
Bhartendra Upadhyay
Bhartendra Upadhyay

Reputation: 116

Keep elements fixed, next to a transforming element

How can i make an element that i transform its width and height not affect its surrounding elements ?

p {
    position: relative;
}
.p1 {
    width:200px;
    height:200px;
    border:1px solid blue;
    outline: 1px solid green;
    display:inline;
    text-align:center;
    background-color: red;
    color: #FFF;
    position:relative;
    display:inline-block;
    float:left;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
}
.p1:hover {
    width:500px;
    height: 500px;
    -webkit-transform: rotate(180deg);
    color:black;
}
<p class="p1">hello1</p>
<p style="" class="p1">hello2</p>
<p style="" class="p1">hello3</p>

Demo at http://jsfiddle.net/toadalskii/mLx0x56n/

Upvotes: 0

Views: 54

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Do not scale it by changing the width/height since those affect the document flow.

Use the scale transform (from 200 to 500 it is a scale of 2.5) so use transform: scale(2.5) rotate(180deg);

body {
    width:100%;
}
p {
    position: relative;
}
.p1 {
    width:200px;
    height:200px;
    border:1px solid blue;
    outline: 1px solid green;
    display:inline;
    text-align:center;
    background-color: red;
    color: #FFF;
    position:relative;
    display:inline-block;
    float:left;
    
    -webkit-transition: background-color 2s, -webkit-transform 2s, color 2s;
    transition: background-color 2s, transform 2s, color 2s;
}
.p1:hover {
    -webkit-transform: scale(2.5) rotate(180deg);
    transform: scale(2.5) rotate(180deg);
    color:black;
    z-index:100;
}
<p class="p1">hello1</p>
<p class="p1">hello2</p>
<p class="p1">hello3</p>

Demo at http://jsfiddle.net/mLx0x56n/1/

Upvotes: 1

Related Questions