How to enlarge a block from right to left using animation?

Question

css

There is a code:

<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;
 }

It is required to make it so that when you click or hover over an img with the show class, the block with the block1 class stretches to the left, to the width of the parent and shows hidden elements, preferably with animation. Here, from right to left, everything seems to be simple, you can set width, but how to do it the other way around?

Answer 1

absolute positioning on the right side do

Answer 2

JS can be used?

Answer 3

codepen.io/anon/pen/avVbzB