YouTube - The floating link preview

gistfile1.txt

/* This is full copy-paste for the Elementotr PRO's Custom Code. In case you use "Simple custom CSS and JS" plugin, 
you'll have to separate the CSS from JS, and exclude the STYLE and SCRIPT tags */

<style>
[data-hover-img] .img-floater {
	position: absolute; 
	opacity: 0;
	width: 400px;
	height: 300px;
	top: -310px; /* or... 150px to center it vertically */
	left: -200px; /* or... -400px to push it to the left */
	transform: scale( 0.1 );
	transform-origin: bottom center; /* or... center center | or... center left | etc...*/
	z-index: 369; 
}
[data-hover-img] {
		position: relative;
}
[data-hover-img] * {
		pointer-events: none;
}
</style>
<script>
;( function() {

  // wait until dom loaded
  document.addEventListener( 'DOMContentLoaded', run_stuff ); 
	
	function run_stuff() {
		
		if( ! window.gsap ) return;
		
		const hover_img_items = gsap.utils.toArray( '[data-hover-img]' );
		
		hover_img_items.forEach( ( item ) => {

				// extract the image url from a
				item.bg_image = item.getAttribute( 'data-hover-img' );
			
				// create elements & append to DOM
				let div_el = document.createElement( 'span' ); 
				div_el.classList.add( 'img-floater' );
				div_el.style.cssText = 'background: no-repeat center / cover url("' + item.bg_image + '") #000000;';
				item.appendChild( div_el ); 
				
				// animation   
				const anim_hover = gsap.fromTo( div_el, 
				{ 
					opacity: 0, 
					scale: 0.1, 
				}, 
				{ 
					opacity: 1,  
					scale: 1, 
					duration: 0.25, 
					ease: 'circ.inOut', 
					paused: true 
				} );
			
				item.addEventListener( 'mouseenter', ( e ) => {
						if( 'desktop' == document.body.getAttribute( 'data-elementor-device-mode' ) ) anim_hover.play();
				} );

				item.addEventListener( 'mouseleave', ( e ) => {
						if( 'desktop' == document.body.getAttribute( 'data-elementor-device-mode' ) ) anim_hover.reverse();
				} );
			
				item.addEventListener( 'mousemove', ( e ) => {
						if( 'desktop' == document.body.getAttribute( 'data-elementor-device-mode' ) ) gsap.set( div_el, { x: e.offsetX, y: e.offsetY } );
				} );
		
		} );
		
	}
  
} )();
</script>