I want to play only the background image. However, the box in the middle is also

• I want to play only the background image. However, the box in the middle is also animated.

• I will provide the link to the video section that demonstrates how I want to animate that section.

Video link: https://drive.google.com/file/d/10MWfj4GRGLZ1QjOQERkR-behEk1Q6hWl/view?usp=sharing

Website link: https://test3.prestigegemsstore.com/

This is the animation code.

.pim {
animation: scale 30s linear infinite;
}

@keyframes scale {
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
}

Hello,

I apologize for the delay.

Try to use the below code:

.promo-banner .main-wrapp-img {
    animation: scale 30s linear infinite;
}

Result: https://gyazo.com/30361835f36ba219f16fba06f5cc09cd

Kind Regards

The animation is working perfectly, but the animation plays in every promo banner. I want it to play in only one promo banner.

Hello,

In this case, I suggest you add the custom CSS class to the promo banner in which the above code will work. https://take.ms/U6Z0J

Here is an example: https://take.ms/OWFDZ

.animated-banner .promo-banner .main-wrapp-img {
    animation: scale 30s linear infinite;
}

Kind Regards

[Author]

Posts