Product Updates | Contact Support | System Status
Page Contents

    Adjusting Images to Appear Only on Hover

    In this topic you will learn how to make overlay images appear only when the viewer hovers over a video.

    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. Follow these steps:

    1. Login to Brightcove Interactivity Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. Click Settings.
    5. In the Custom Annotation CSS (URL) field, add this style sheet.
      //interactivity.support.brightcove.com/assets/css/style/on_hover_img.css

      Or 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;
      }
    6. Click SUBMIT.

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


    Page last updated on 01 Aug 2022