Traying to animate both items on the hover of one-CodePudding

HTML

     <div >
        <img src="/AP/Email.svg" />
        <div ><img src="/AP/PhoneNumber.svg"></div>

CSS

.section {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 12%;
  margin-left: -1%;
}
        
.layer {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 4%;
  margin-left: 4%;
}
        
        
.section:hover img {background-color: red;}
               
.section:hover .layer {transform: translate(15%)}

So Above I was trying to have it so when I hover one it would animate both in different directions. Right now it seems to work but only animates PhoneNumber, not both email and PhoneNumber. I have tried A few different attempts one animated both but only in the same direction. Any idea what I'm doing wrong?

CodePudding user response：

.section {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 12%;
  margin-left: 10%;
}

.layer1 {
  position: relative;
  transition: transform 1.5s ease-out;
  margin-top: 4%;
  margin-left: 4%;
}

.layer2 {
  position: relative;
  transition: transform 1.5s ease-out;
  margin-top: 4%;
  margin-left: 4%;
}

.section:hover img {
  background-color: red;
}

.section:hover .layer1 {
  transform: translate(15%)
}

.section:hover .layer2 {
  transform: translate(-15%)
}

<div >
  <div ><img src="https://www.typinks.com/images/character-sketch-of-friar-laurence-in-romeo-and-juliet.webp" width="100px" height="100px" /></div>
  <div ><img src="https://www.typinks.com/images/role-of-fate-in-romeo-and-juliet.webp" width="100px" height="100px"></div>
</div>

does this help? inorder to animate it different directions,translate in opposite directions