Modify position after transition ends - html

Question

I'm trying to force changing property position to change after certain part of time (after all animations will end). For this I've created sample codepen so you can see what I've already achieved (more-less):
transition: width 0.5s ease-in, height 0.5s, position 0s ease 0.6s;
https://codepen.io/anon/pen/xpQdZm
As you can see hovering on the green container triggers transition of inside container grow (from right to left). What I would like to do is to make the container decrease when we remove the hover effect but to keep the position set to absolute while transition still lasts but set position to static after all transitions ends.
The more illustrative example can be see here: https://codepen.io/anon/pen/VyVzed
Because of the changing of position from absolute to static when hover is missing, the images are flickering and it looks so ugly.
.container {
display: flex;
flex-direction: row;
width: 800px;
}
.container div {
position: relative;
flex: 1;
}
.container div img {
width: 200px;
transition: width 0.5s ease-out;
z-index: 100;
}
.container div img:hover {
height: 200%;
position: absolute;
width: 200%;
left: 0;
right: auto;
top: 0;
bottom: auto;
z-index: 200;
transition: width 0.5s ease-out;
}
.container:nth-of-type(even) div img:hover {
bottom: 0;
top: auto;
}
.container div:nth-of-type(even) img:hover {
left: auto;
right: 0;
}
<div class="container">
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
</div>
<div class="container">
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
</div>
I know I can set div to fixed height but the problem is I want images to be scaled by its width.

Answer 1

Instead of thinking about changing position why not changing how the animation works. You may try the use of scale and adjust transform-origin to decide how the image should move (and also optimize your markup)
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 400px;
}
.container img {
width: 100px;
height: 100px;
transition: 0.5s ease-out;
transform-origin: top left;
}
.container img:nth-child(even) {
transform-origin: top right;
}
.container img:nth-child(2n+5) {
transform-origin: bottom left;
}
.container img:nth-child(2n+6) {
transform-origin: bottom right;
}
.container img:hover {
position: relative;
z-index: 2;
transform: scale(2);
}
<div class="container">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/150/150/">
<img src="https://lorempixel.com/200/200/">
<img src="https://lorempixel.com/300/300/">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>