Link/Chain CSS Transitions-CodePudding

I know this should be a no-brainer, but for some reason I really just cannot figure out how to link my CSS transitions... I am attaching a website with widgets that act how I want mine to act: https://kion.io/resources

I love that when you hover on the widget, all CSS transitions happen at the same time over that one div/a href

I am attempting to do the same, and I have written all of my code but I have to hover individually over my elements... this is for a site that is not yet done, but I will post a link to the page that I am referring to. Specifically focusing on the widgets in the middle of the page. They scale up, BUT I want the arrows to move to the right when you hover over the entire div like in Kion's site. I can only figure out how to make them move when you hover over them specifically.

My site: https://cloudshape.net/cloudshape/

My code:

/*WIDGETS*/

.card a {
  text-decoration: none;
  color: black;
}

.card a:hover {
  color: black;
}

.card {
  font-family: 'helvetica', sans-serif;
  margin: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-image: url('https://cloudshape.net/wp- 
 content/uploads/2022/02/clear-bg.png');
 background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: background-image 2s ease-in-out;
}

.white-square {
  width: 310px;
  height: 330px;
  background-color: white;
  border: 2px solid black;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px #202020;
  padding: 15px;
  text-align: center;
  transition: transform .4s ease-in-out, border .4s ease-in-out;
}


/*WIDGET ARROW BUTTONS*/

.btn img {
  width: 80px;
  margin-top: -20px;
  margin-left: 120px;
}

.btn img:hover {
  margin-left: 130px;
}

.btn img {
  transition: margin-left .7s ease;
}

<div >
  <a href="">
    <div >
      <span ><img alt="security" src="https://cloudshape.net/wp-content/uploads/2022/02/shielddot-color.png"/></span>
      <h5>Dev(Sec)Ops/SRE<br>Architecture & Modernization</h5>

      <p>Short for development, security and operations — automates the integration of security at every phase of the software development lifecycle.</p>
      <span ><img alt="button" src="https://cloudshape.net/wp-content/uploads/2022/02/arrow.png"/></span>
    </div>
  </a>
</div>

CodePudding user response：

You could use this CSS rule to target your arrow when your white square is hovered :

.white-square:hover .btn img {
  margin-left: 130px;
}