How to transform: translate more elements to same position?-CodePudding

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

CodePudding user response：

for simplest answer, use CSS variables with a calc() function.

one time all the elements!! easy and fast

I commented on the code if you want...

the first element has a --i var with 0, so it will be 0 position x
the second element has a --i var with 1, so it will be -100 position x
the third element has a --i var with 2, so it will be -200 position x

the amazing part about this, is if you want to add more images, it will be easy for you, because the formula is calculated by CSS (not you)

here the fixed code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* here the trick */
  --end-position: calc(-100px * var(--i));
}

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

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


/* use the DRY method (Dont Repeat Yourself) */

.container img:hover {
  transition: 3s;
  /* one time for all, that's easy! and fast*/
  transform: translate(var(--end-position), 200px);
}

<div >
  <img style="--i: 0;"  src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
  <img style="--i: 1;"  src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
  <img style="--i: 2;"  src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>

CodePudding user response：

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