How to transform: translate more elements to same position?

January 4, 2022

that’s my first post here. I’m working on a project and one thing block me so i’m trying to ask you if is a solution for this.
I have 3 images with display:flex and justify-content:center. (parrent div)
Then i wanna make them on hover to transform(translate) to same position.
Like, when i hover first image to go left: 200px; and top: 200px; (ex) and same for the rest of two without modify the originaly position from display flex.

Is a easy way of doing that?
Thank you!

Also i wanna make them in JS later but first i wanna make this working fine

That’s what i wanna do

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100px;
    height: 100px;
}

.container {
    background-color: red;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.img-test1:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test2:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test3:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class ="img-test1" src="./Asset_1.svg" alt="">
        <img class ="img-test2" src="./Asset_2.svg" alt="">
        <img class ="img-test3" src="./Asset_3.svg" alt="">
    </div>
</body>
</html>

>Solution :

To replicate the positioning given in the picture you need to move the first element by 0 in the x direction, the second by -100px, the third by -200px to get them all to translate to under the first one.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100px;
    height: 100px;
}

.container {
    background-color: red;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.img-test1:hover {
    transition: 3s;
    transform: translate(0, 200px);
}

.img-test2:hover {
    transition: 3s;
    transform: translate(-100px, 200px);
}

.img-test3:hover {
    transition: 3s;
    transform: translate(-200px, 200px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class ="img-test1" src="./Asset_1.svg" alt="">
        <img class ="img-test2" src="./Asset_2.svg" alt="">
        <img class ="img-test3" src="./Asset_3.svg" alt="">
    </div>
</body>
</html>