.product-container {
position: relative;
width: 100%; /* Adjust based on your layout */
height: auto; /* Adjust based on your layout */
}
.product-image {
width: 100%;
height: auto;
display: block;
}
.hover-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none; /* Initially hide the video */
object-fit: cover;
z-index: 10; /* Make sure the video appears on top of the image */
}
.product-container:hover .product-image {
opacity: 0; /* Hide the image when hovered */
}
.product-container:hover .hover-video {
display: block; /* Show the video when hovered */
opacity: 1;
}
document.querySelectorAll('.product-container').forEach(container => {
container.addEventListener('mouseover', function() {
let video = this.querySelector('.hover-video');
if(video) {
video.play();
}
});
container.addEventListener('mouseout', function() {
let video = this.querySelector('.hover-video');
if(video) {
video.pause();
video.currentTime = 0; // Reset video to start
}
});
});
Choosing a selection results in a full page refresh.
