Create Stunning Soda Can Animation Effects with Elementor – Step-by-Step Tutorial

Facebook
Email
WhatsApp

CSS CODE

				
					selector{

    --transition: 0.5s;

    --circle-color: #d83133;

    --content-background: #0B0063;

    --mobile-height: 650px;

    --mob-top: 300px;

}

selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{

    transition: all var(--transition) !important;

}

selector > .elementor-widget-wrap:before{

    content: "";

    background: var(--circle-color);

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    border-radius: 20px;

    clip-path: circle(120px at center);

}

selector:hover > .elementor-widget-wrap:before{

    clip-path: circle(400px at center);

    background: var(--content-background);

}

selector:hover .elementor-widget-image{

    right: -200px !important;

}

selector:hover .elementor-widget-image .elementor-widget-container{

    transform: scale(1);

}

selector .pepsi-text{

    opacity: 0;

    visibility: hiddin;

}

selector:hover .pepsi-text{

    opacity: 1;

    visibility: visible;
				
			
Hostinger domain & hosting ireland