Create diffrent transition animation for multiple child element when cursor hover above (same) parent

Issue

i have css & html code like this :

.item-video-kami {
  width: 480px;
  overflow: hidden;
  position: relative;
}

.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;
  /* Initial opacity set to 0 */
  transition: opacity 0.2s ease-in 0.1s;
}

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

.item-video-kami:hover .play-icon {
  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>

the intended result is, when cursor is hovering above .item-video-kami, the image will zoom (scale up) and in the same time, the div.play-icon is change the opacity to 0.8

but in above snippet, the animation is work for scale up image only, but the second animation is not trigger(please check the snippet if not clear)

Solution

Is this the expected output?

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

Answered By - Naren Murali