Want to get this as ready made template with just 1 CLICK INSTALL?
Code snippet on Image Box Widget:
selector{ transform: translateY(-50%); }
Code snippet for Image Hover Effect (on Section):
selector{ --width: 2px; --color: #FFB400; --angle: -7deg; } selector .elementor-widget-divider .elementor-widget-container{ overflow: hidden; transition: all 0.3s ease-in-out; } selector .elementor-widget-divider .elementor-divider, selector .elementor-widget-divider .elementor-widget-container{ position: relative; } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after, selector .elementor-widget-divider .elementor-divider:before, selector .elementor-widget-divider .elementor-divider:after{ content: ""; position: absolute; background: var(--color); } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after{ height: var(--width); width: 100%; transform: scaleX(0); } selector .elementor-widget-divider .elementor-widget-container:before{ top: 0; transform-origin: right; } selector .elementor-widget-divider .elementor-widget-container:after{ bottom: 0; transform-origin: left; } selector .elementor-widget-divider .elementor-divider:before, selector .elementor-widget-divider .elementor-divider:after{ height: 100%; width: var(--width); transform: scaleY(0); } selector .elementor-widget-divider .elementor-divider:before{ left: 0; transform-origin: top; } selector .elementor-widget-divider .elementor-divider:after{ right: 0; transform-origin: bottom; } selector .elementor-column{ transition: all 0.3s ease-in-out; } selector .elementor-column:hover{ transform: translateY(-15px); } selector .elementor-column img{ transition: all 0.3s ease-in-out; } selector .elementor-column:hover img{ box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 40%); } selector .elementor-widget-image-box .elementor-widget-container{ opacity: 0; transition: all 0.3s ease-in-out; transform: translateY(10px); } selector .elementor-column:hover .elementor-widget-image-box .elementor-widget-container{ opacity: 1; transform: none; transition-delay: 0.3s; } selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container{ background: var(--color); transform: rotate(var(--angle)); transition-delay: 0.3s; } selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:before, selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:after{ transform: scaleX(100%); transition: all 0.5s ease-in-out; } selector .elementor-column:hover .elementor-widget-divider .elementor-divider:before, selector .elementor-column:hover .elementor-widget-divider .elementor-divider:after{ transform: scaleY(100%); transition: all 0.5s ease-in-out; } @media(max-width: 1024px){ selector .elementor-widget-wrap{ width: 360px; margin-left: auto !important; margin-right: auto !important; } selector .elementor-column:hover{ transform: none; } } @media(max-width: 767px){ selector .elementor-widget-divider .elementor-divider-separator{ border-top-width: 350px; } }