Copy-paste code into Elementor's Custom Code file or use Snippets plugin for WordPress. If you use Snippets omit the SCRIPT wrapping element.

OoohBoi GSAP Teleporter

<script>
;( function() {

	document.addEventListener( 'DOMContentLoaded', my_stuff );
  
  function my_stuff() {
		
		let is_mobile = false;
  
    let hero = document.querySelector( '#hero' ); 
		let tele_bg = gsap.utils.toArray( '#hero .tele' ); 

		// update whatever is needed on window resize
		let debounce = function( func ) {
			let timer;
			return function( event ) {
				if( timer ) clearTimeout( timer );
				timer = setTimeout( func, 200, event );
			};
		}
		window.addEventListener( "resize", debounce( ( e ) => {
			// disable for mobiles
			let	mobile_view = window.matchMedia( "(max-width: 767px)" );
			if( mobile_view.matches ) {
				gsap.set( '#hero .tele .elementor-background-overlay', { autoAlpha: 1, y: 0 } ); 
				is_mobile = true;
			} else { 
				gsap.set( '#hero .tele .elementor-background-overlay', { autoAlpha: 0 } );
				is_mobile = false; 
			}
			
			// update the title position
			tele_bg.forEach( ( obj ) => { 
				let tele_content = obj.querySelector( '.elementor-widget-wrap' ); 
				let tele_text = obj.querySelector( '.tele-text' ); 	
				if( ! is_mobile ) gsap.set( tele_content, { y: tele_text.offsetHeight + 12 } );
				else gsap.set( tele_content, { y: 0 } );
			} );
			
		} ) );
		
		tele_bg.forEach( ( obj ) => { 
			
				// grab the image URL
				let bg_overlay = obj.querySelector( '.elementor-background-overlay' ); 
				let bg_image   = gsap.getProperty( bg_overlay, 'backgroundImage' ); 
		
				// create elements
				let div_el = document.createElement( 'div' ); 
				div_el.style.cssText = 'opacity: 0; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: no-repeat center / cover ' + bg_image + ' #000';
				hero.prepend( div_el ); 
				
				gsap.set( div_el, { scale: 1.5 } );
				
				// column title and text
				let tele_content = obj.querySelector( '.elementor-widget-wrap' ); 
				let tele_text    = obj.querySelector( '.tele-text' ); 
				gsap.set( tele_content, { y: tele_text.offsetHeight + 12 } ); 
				
				obj.addEventListener( 'mouseenter', ( e ) => { 
					
						if( is_mobile ) return;
					
						let me_tl = gsap.timeline( { defaults: { ease: 'expo.out' } } );
						me_tl.to( div_el, { opacity: 1, scale: 1, duration: 0.4 } )
						.to( tele_content, { y: 0, duration: 0.5 }, 0 )
						.to( obj, { background: 'rgba(0,0,0,0.5)', duration: 0.3 }, 0 );
					
				} );
			
				obj.addEventListener( 'mouseleave', ( e ) => { 
					
						if( is_mobile ) return;
					
						let ml_tl = gsap.timeline( { defaults: { ease: 'expo.out' } } );
						ml_tl.to( div_el, { opacity: 0, scale: 1.5, duration: 0.6 } )
						.to( tele_content, { y: tele_text.offsetHeight + 12, duration: 0.5 }, 0 )
						.to( obj, { background: 'transparent', duration: 0.3 }, 0 );

				} );
		
		} );
  	
  }
  
} )();
</script>