CODEWITHSUNDEEP
javascriptcsshoveroverlaymp4
Frederic Ohnemueller
Frederic Ohnemueller

Reputation: 1

Playing video and showing text on hovering over image

I am looking for a way to implement hovering over an image that triggers playing a video. When the mouse is not over the image anymore, the image (poster?) should be displayed again. There should also be text displayed over the video. Please see the example below from Loop. They have this hover effect on their case examples. I tried multiple solutions with imageoverlay or poster image, but none of these give me a smooth transition from image to video. See the code below.

I don't know how to add text on top of the image/video that gets this "Explore" text while hovering, as in the example from Loop: https://www.agentur-loop.com/ (hover over 'digital' to see the effect).

Edit 1: Here: agentur-loop.com/cases they have a really smooth transition on hover from image to video, and if I mouseover out the video it transitions/fades back to the (poster)image smoothly. My current state can be seen here at the very bottom here: fredericlouis.com/fredericlouis.com/admin Thanks in advance! –

$(document).ready(function() {
  $('.video2').each(function(i, obj) {
    $(this).on("mouseover", hoverVideo);
    $(this).on("mouseout", hideVideo);
  });
});

function hoverVideo() {
  $(this).find(".overlayImage").hide();
  $(this).find(".thevideo")[0].play();
}

function hideVideo(video) {
  $(this).find(".thevideo")[0].currentTime = 0;
  $(this).find(".thevideo")[0].pause();
  $(this).find(".overlayImage").show();
}

video2 {
  width: 1200px;
}

.overlayImage {
  position: absolute;
}

<div class="video2">
  <img src="images/apple_vr10.png" class="overlayImage" width="600" alt="apple vr" />
  <video class="thevideo" loop muted poster="images/apple_vr10.png" onmouseout="this.pause()">
        <source src="videos/apple_vr.mp4" type="video/mp4">
    </video>
 </div>

Upvotes: 0

Views: 3463

Answers (2)

Nino Filiu
Nino Filiu

Reputation: 18493

  1. Put the text and the video in a div and use relative and absolute positions to make the first appear in front of the video
  2. Use CSS :hover to hide/display the text on hover
  3. Use JS to play/pause the video as you like depending on whether the mouse is hovering or not over the video

The solution is in plain vanilla JS to help non-jQuery users but can be easily adapted to reduce the code by a few lines with jQuery.

let div = document.querySelector('div');
let video = document.querySelector('video');

div.onmouseover = () => video.play();
div.onmouseout = () => video.pause();
div {
  width: 100%;
  position: relative;
}
div > p {
  width: 100%;
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  color: white;
  transition: all .5s;
}
div:hover > p {
  opacity: 0;
}
div > video {
  width: 100%;
  position: absolute;
}
<div>
  <video
    src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
    muted
  ></video>
  <p>Hover to play the video!</p>
</div>

Upvotes: 1

vaku
vaku

Reputation: 712

The Website agentur-loop toggle multiple Images(in small time) on hovering on the text...

You can do this by adding the slide show(carousel) with transition time 0.1s (very small) for each slide;

Thanx...

Upvotes: 0

Related Questions