JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="i" class="images_parent">
        <div id="a">image3</div>
        <div id="b">image3.1</div>
        <div id="c">image3.2</div>
    </div>
    <div id="i2" class="images_parent">
        <div id="a2">image2</div>
        <div id="b2">image2.1</div>
        <div id="c2">image2.2</div>
    </div>
    <div id="i3" class="images_parent">
        <div id="a3">image3</div>
        <div id="b3">image3.1</div>
        <div id="c3">image3.2</div>
    </div>
</div>

CSS

<style>

    .images_parent {
        width:100%;
    }

    .images_parent >* {
        width: 10%;
        /*position:absolute; */
        transition: margin-left 1s;
    }

    /*#i*/
    #i:hover >*{z-index:1;}
    #i:hover #a{
        margin-left:20%;
        transition: margin-left 2s ease-in-out;
    }
    #i:hover #b{
        margin-left:10%;
    }

    #a{background-color: blue;}
    #b{background-color: blue;}
    #c{background-color: blue;}
    /*#i*/

    /*#i2*/
    #i2{margin-left:10%;}
    #i2:hover >*{z-index:1;}
    #i2:hover #a2{
        margin-left:-10%;
        transition: margin-left 1s;
    }
    #i2:hover #b2{
        margin-left:10%;
    }

    #a2{background-color: brown;}
    #b2{background-color: brown;}
    #c2{background-color: brown;}
    /*#i2*/

    /*#i3*/
    #i3{margin-left:20%;}
    #i3:hover >*{z-index:1;}
    #i3:hover #a3{
        margin-left:-20%;
        transition: margin-left 2s ease-in-out;
    }
    #i3:hover #b3{
        margin-left:-10%;
    }

    #a3{background-color: darkgreen;}
    #b3{background-color: darkgreen;}
    #c3{background-color: darkgreen;}
    /*#i3*/
</style>