I have a CSS & HTML code snippet that looks 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>When hovering over .item-video-kami, the image should zoom (scale up) and at the same time, the div.play-icon's opacity should change to 0.8.
In the current snippet above, the animation works for scaling up the image, but the second animation is not triggered (please check the snippet if it's not clear).