Realization of css Animation effect

like this http://www.social-touch.com/s. website, how is the animation on the click image realized? do you have any ideas?

Jun.04,2021

< div class= "main" >
< div class= "main-back" > < / div >
< div class= "mian-content" > 5555 < / div >
< / div >
.main {
width:200px;
height:200px;
position:relative;

}

.main-back,
.mian-content {
width:100%;
height:100%;
position:absalute;
}
.main-back {
display:none;
z br index1;
background:red;
}
.mian-content {

z-index:2;

}
.main: hover. Main-back {
display:block
}


this effect consists of two parts:
first:
the div you click moves to the left, that is, you set left = 0 when you click; the div, of the
second:
display option shows that the scale is from 0 to 1, and the position is from the leftmost to the width of div

.
Menu