Html 当光标悬停在(相同)父元素上方时，为多个子元素创建不同的过渡动画

.item-video-kami {
  overflow: hidden;
  position: relative;
  position: relative;
  height: 100%;
  display: inline-block;
}

.item-video-kami>.play-icon.full-height>svg {
  width: 106px;
  color: #ffffff50;
}

.item-video-kami img {
  transition: all .5s ease;
}

.item-video-kami>.play-icon {
    height: 100%;
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #1e1e1e94;
    opacity: 0;
    top: 0;
    transition: opacity 0.2s ease-in 0.1s;
    bottom: 0;
    left: 0;
    right: 0;
}

.item-video-kami:hover img {
  transform: scale(1.1);
}

.item-video-kami:hover .play-icon {
  z-index: 2;
  opacity: 0.8;
  /* Adjusted opacity value to 0.8 for 80% */
}

<a href="#" class="item-video-kami">
  <div class="play-icon full-height">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                            <path fill-rule="evenodd"
                                d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
                                clip-rule="evenodd" />
                        </svg>
  </div>
  <img src="https://picsum.photos/200/300" alt="">
</a>

<a href="#" class="item-video-kami">
  <div class="play-icon full-height">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                            <path fill-rule="evenodd"
                                d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
                                clip-rule="evenodd" />
                        </svg>

  </div>
  <img src="https://picsum.photos/200/300" alt="">
</a>