Viotech

Animated Card Effect | With Elemnetor Pro | Portfolio Example

https://youtu.be/GmSusw_7NEE Facebook Email WhatsApp CSS Classes for Right image image_right CSS class for Light Image image-left CSS CODE Add CSS class “image_right” for right side image and “image_left” for left side image Add this CSS code with inner section selector{ height: 350px; overflow-y: clip; display: block; } selector img{ border-radius: 10px 10px 0 0; cursor: …

Animated Card Effect | With Elemnetor Pro | Portfolio Example Read More »

Pricing toggle Thumbnail

How to add Toggle to pricing table in Elementor

Facebook Email WhatsApp Custom CSS for toggle selector{ –inactive-color: #E2E2E2; –padding: 5px; –size: 23px; } selector.monthly .elementor-widget-container{ background: var(–inactive-color); } selector .elementor-divider{ position: relative; cursor: pointer; } selector .elementor-divider:after{ content: “”; position: absolute; top: var(–padding); left: calc(100% – var(–size) – var(–padding)); height: var(–size); width: var(–size); background: #fff; border-radius: 100%; transition: all 0.3s ease-in-out; } selector.monthly …

How to add Toggle to pricing table in Elementor Read More »

Auto Sliding Card Carousel Effect With Elementor

Creating Auto Sliding Card Carousel Effect With Elementor

Facebook Email WhatsApp Custom CSS COODE #1 selector{     –change-duration: 0.75s;     height: 320px; } selector .elementor-inner-section{     position: absolute;     top: 50%;     left: 0;     transform: translateY(-50%); } selector .elementor-container{     opacity: 0;     transform: translateY(-100%) scale(0.5); } .anim selector .elementor-container{     transition: all var(–change-duration) ease-in-out; } selector .after .elementor-container{     opacity: 0.4; …

Creating Auto Sliding Card Carousel Effect With Elementor Read More »

Interactive Landing Page Design with Elementor| Step-by-Step Tutorial

https://youtu.be/GyKLvMvvKJQ Facebook Email WhatsApp Thumbnails Centered CSS selector{ position: absolute; left: 0; bottom: -1vh; width: 150px; transform: translateX(-50%); } selector img{ cursor: pointer; transition: 0.5s; } selector img:hover{ transform: translateY(-12px) } JavaScript snippet for thumbnails Thumbnail Custom Attribute data-vincent|image_url BG Color Custom Attribute data-color|color_code Background Transition CSS .watch-section{ -webkit-transition: all 1s !important; transition: all 1s …

Interactive Landing Page Design with Elementor| Step-by-Step Tutorial Read More »

Water animation text thumbnail

Easy Wave in Text Animation Elementor Pro

Facebook Email WhatsApp CSS CODE Front End CSS selector{     -webkit-text-stroke: 2px #2F4D98; } Back End CSS selector{     -webkit-animation: water 4s ease-in-out infinite;             animation: water 4s ease-in-out infinite; } @-webkit-keyframes water{     0%, 100%{         -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); …

Easy Wave in Text Animation Elementor Pro Read More »

Pepsi Thumbnail

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{ …

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