Adjusting Images to Appear Only on Hover

CSS can be used to have images appear only when the viewer hovers over a video. In this example, hovering over the area below the text will display the Brightcove logo. Both the text and image annotations are configured to display until the end of the video.

Showing a graphic only on hover can easily be accomplished through a CSS class. Update the Hapyak-enabled Brightcove Player to point to a CSS file:

1. Login to Video Cloud Studio.
2. Open the Players module.
3. Locate the HapYak-enabled Brightcove Player and click on it to open the player properties.
4. Click Plugins in the left navigation.
5. Click the hapyak plugin to edit the plugin properties.
6. Edit the Options(JSON) to point to the following CSS file.

   //interactivity.support.brightcove.com/assets/css/style/on_hover_img.css

   

7. Save the changes and publish the changes to the player.

Another option is to add this CSS to your current style sheet:

.popcorn-image:not(.hapyak-editing-image) img {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.popcorn-image:not(.hapyak-editing-image).popcorn-image:hover img {
  opacity: 1;
}
      

Images will now fade in on mouse hover. To change how fast images fades in, simply change 0.5s to any number you wish.