Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The challenge I am facing is that the images are losing their responsive behavior when I deactivate this segment:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
However, without it, when unhovered, the image quickly returns to its original size, losing the desired transition effect. Can you offer any suggestions on how to resolve this issue?
1. In this example, the responsive behavior of the image remains intact, but the hover zoom effect loses its smooth transition.
2. Check out this example where the transition effect works well, but resizing the window leads to a loss of the image's responsive nature.