Elementor DIAGONAL Image Hover Effect with Text Overlay

 

 

Code snippet for Diagonal Image Hover Effect:

selector .diagonal{
    position: absolute;
}
selector .elementor-top-column > .elementor-widget-wrap{
    overflow: hidden;
}

selector .diagonal{
    pointer-events: none;
}
selector .diagonal,
selector .elementor-widget-divider{
    transition: all 0.5s ease-in-out !important;
}
selector .elementor-widget-wrap:hover .diagonal{
    transform: rotate(-45deg);
}
selector .elementor-widget-wrap:hover .elementor-widget-divider{
    transform: scaleX(2) translateX(20px);
    transform-origin: left;
}
selector .elementor-widget-wrap:hover .elementor-widget-heading + .elementor-widget-divider{
    transform: scaleX(2) translateX(-20px);
    transform-origin: right;
}

 

CSS Code snippet for Changing Background Overlay:

selector:hover + .elementor-inner-section:not(.diagonal) .elementor-background-overlay{
    background: #00000075;
}