css切卡片的问题

五张图,需要折叠放置,移到一张图的时候,这张图变大,其他图适当的变化

首先只要不是第一张图,就都会让它左移 也就是需要用css,选择不是第一个子元素的

.section-three  .images .image:not(:first-child) {
  margin-left: -7vw;
}

静态: 然后如果移到图片,或者focus了就

.section-three  .images .image:hover,
.section-three  .images .image:focus-within{
    transform: scale(1.2);
    
  ~.section-three .images .image {
    transform: translateX(12rem);
  }
}

移动到之后: