Как с помощью анимации увеличить блок справа налево?

Question

[Porebro]

Есть код:

<div class="test">
                <div class="block1">
                        <img class="hide" src="#" width="100px" height="100px" alt="">
                        <img class="hide" src="#" width="100px" height="100px" alt="">
                        <img class="show"src="#" width="100px" height="100px" alt="">
                </div>
        </div>

.test{
        
        border: 1px solid black;
        position: relative;
        width: 800px;
        height: 120px;
       }
.block1{
        position: relative;
        left: 450px;
        top:5px;
        border: 1px solid black;
        display: inline-block;
        padding: 1px;
       }
 .hide{
        visibility: hidden;
 }

Требуется сделать так, чтобы при нажатии или наведении на img с классом show, блок с классом block1 растягивался влево, на ширину родителя и показывал скрытые элементы, желательно с анимацией. Вот справа налево вроде все просто, можно width задать , а как сделать наоборот?

Answer 1

[Сергей]

абсолютное позиционирование по правой части сделайте

Comments

[Porebro]

не совсем понял.

Answer 2

[Майк]

JS применять можно?

Comments

[Porebro]

Можно.

Answer 3

[Pavel Torbeev]

codepen.io/anon/pen/avVbzB