EXPANDING Image Hover Effect/Animation with Text Overlay in Elementor

 

 

Code snippet for Image Hover Effect:

selector .elementor-widget{
    width: 400px;
    opacity: 0;
    transition: all 0.5s linear;
}
selector .elementor-container{
    flex-wrap: nowrap;
}
selector .elementor-widget-wrap{
    flex-direction: column;
    transition: all 0.3s linear !important;
}
selector .elementor-column{
    min-width: 1px;
    transition: all 0.5s linear;
    overflow: hidden;
}
selector .elementor-column:hover{
    width: 100%;
}
selector .elementor-column:hover .elementor-widget{
    opacity: 1;
}

@media (max-width:1024px){
selector .elementor-widget{
    width: 300px;
} 
}

@media (max-width:767px){
selector .elementor-widget-wrap{
    height: 300px;
}
selector .elementor-column:hover .elementor-widget-wrap{
    height: 380px;
}
selector .elementor-container{
    flex-wrap: wrap;
}
}