I am using a CMS that uses Cycle2 for the sliders. I've been trying to make the images zoom in at the moment they are active using following css:
img {
height: 100vh !important;
transition: transform 10s linear;
transform: scale(1);
transition-delay: 5s;
}
.is-active img{
transform: scale(1.5);
transition-delay: 0s;
}
This works perfectly on firefox but on most other browsers (most versions of chrome, safari, opera,...) The first image starts already zoomed in and the zooming starts on the second image. When the slider gets back to the first image it does the zoom correctly.
Does anyone know what might be causing this or how to fix this?