CODEWITHSUNDEEP
htmlcss
CHASE
CHASE

Reputation: 521

How would I reverse a css transition property width?

So I want to make a css animation property where the width extends toward the left but it always extends to the right. I am trying to figure how to make the width extend left instead of the default right. How should I approach this problem? JsFiddle below
Jsfiddle

Html:<div></div>

Css:

div
{
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:width 2s; 
}

div:hover
{
    width:200px;
}

Upvotes: 2

Views: 5775

Answers (2)

Suhaib Janjua
Suhaib Janjua

Reputation: 3572

You need to override your left side in order to extend the width leftward. You have used left:130px; is the starting point of your div. And on div:hover you still didn't change the left so it automatically extends to the rightward as you have also sets the bottom:130px;

Your default width:100px; is change on div:hover to width:200px; so you need to decrease your left starting position on div:hover. Here is a Demo.

div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}

Upvotes: 0

danasilver
danasilver

Reputation: 556

Adjust the left value as well:

Updated Fiddle

div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}

Upvotes: 4

Related Questions