Fix childs' position while div is transitioning

user_3935035 0
Viewed 56

My setup is the following

<div class=wrapper>
  <div class=element />
</div>

Markup

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
}

https://codepen.io/anon/pen/eLzGXY

Right now, when I click on the Icon, the Icon moves into the middle of the wrapper, as it transitions. I want it to stay in the left, on its original position. How would I do that?

css javascript
3 Answers

IMHO there are multiple ways to go about this - If you are not averse to use positioning - you can set the element position as absolute and with some hacky left you can achieve what you want.

.element {
  background-color: hotpink;
  width: 10px;
  position:absolute;
  left:37px;
  height: 10px;
}

https://codepen.io/anon/pen/OoXOPo#anon-login

Or we can use relative with some a justify-items:start on the parent container to place the element in its place always

https://codepen.io/anon/pen/eLzeZp

user_11051760
user_31940160

You can achieve using set css property when mouse hover.

See, Below example. 

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
    justify-content: left;
    padding-left:35px;
}
<div class=wrapper>
  <div class=element>
  </div>
</div>

user_73643020
Related