Estoy tratando de crear una galería de imágenes que, cuando se pasa el cursor sobre ellas, la imagen desaparece y comienza a reproducirse un video, similar a Netflix. Pude crear una galería que hizo lo que quiero aquí:
.container { display: flex; overflow-x: auto; width: 600px; margin-left: 300px; } .container img { margin-right: 15px; width: 150px } <div class="container"> <img src=https://image.shutterstock.com/image-vector/check-back-soon-hand-lettering-600w-1379832464.jpg>y la imagen desaparece y el video se reproduce al pasar el mouse que quiero aquí:
const videos = document.querySelectorAll(".polystar"); for (const video of videos) { video.addEventListener('mouseover', function() { video.play() }, false); video.addEventListener('mouseout', function() { video.pause() }, false); } .gallery-cv { display: flex; z-index: 1; overflow-x: auto; width: 1200px; margin: 0; } .polystar { width: 300px; z-index: 2; opacity: 0; } .top-img { position: absolute; width: 300px; height: 535px; z-index: 1; } .polystar:hover { opacity: 1; } .second { margin-left: 150px; position: absolute; z-index: 3; } <h1> headline </h1> <div class="gallery-cv"> <img class="top-img first" src="https://source.unsplash.com/random"> <video class='polystar' muted src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&profile_id=172&oauth2_token_id=57447761" type="video/mp4"> <img class="top-img second" src="https://source.unsplash.com/random"> <img class="top-img third" src="https://source.unsplash.com/random"> </div>Pero cuando trato de combinarlos (como lo intenté en el codepen anterior), mi galería desaparece y me quedo con una sola imagen, a pesar de tener otras presentes en el html. Supongo que esto tiene algo que ver con que pierdo mi galería cuando trato de tener las imágenes dentro de ella absolutamente posicionadas, pero no estoy seguro de qué otra manera lograr mi efecto de desplazamiento sin posicionarlas absolutamente.
Hay múltiples problemas que tenemos que resolver. Comencemos con la imagen que debe mostrarse de forma predeterminada y desaparecer para el video al pasar el mouse:
<div> .position: relative; al elemento padre (contenedor)position: absolute; inset: 0; (recuadro: 0 = arriba + derecha + abajo + izquierda: 0;) para que la imagen abarque todo el elemento envolvente y lo eleve por capas sobre el video con un índice z positivo: índice z-index: 1;div:hover img { display: none; } El siguiente problema es comenzar a reproducir el video al pasar el mouse. Para eso necesitamos JS, que también podemos hacer con onmouseover -attribute: onmouseover="element.play();"
Para pausar el video cuando no estás flotando, podemos usar JS o onmouseout -attribute: onmouseout="element.pause();"
Tanto el activador/atributo onmouseover como onmouseout deben agregarse al elemento principal envolvente.
div { position: relative; } video { width: 100%; } img { width: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 1; } div:hover img { display: none; } <div onmouseover="document.querySelector('video').play();" onmouseout="document.querySelector('video').pause();"> <video> <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4"> </video> <img src="https://via.placeholder.com/1920x1080.jpg"> </div>