How to Implement Image Overlay

How to Implement Image Overlay

Sometimes you may want to give viewers extra information about a person, product, place, or event included in the video. While doing this, you can use information popups within the video. Let's look at how to.


Create a project from the video that you want to add Overlay and open the Cinema8 Editor.

1-  Add three layers to the video timeline.

2-  Add a clickable hotspot to the third layer. This can be a text, image or clickable area. Click here to see how to. After adding, set the time interval of Start and End from its properties panel as long as you want to show the element in the video. We set it to be visible throughout the video.

3-  We will add image overlay to the second layer. In other words, an information box that will appear when a button is clicked. You should have prepared this overlay as an image before. Drag and drop the Image widget from the element panel to the timeline.

Name it in the Properties panel. Set the Start and End time period to how long you want to show the element in the video. We set it to be visible throughout the video. Unmark the Visible feature because we don't want it to appear in the video without clicking the button.

4-  When the viewer opens the overlay, we need to add the Close button to allow them to close. For this, we will add close button as an image to the first layer. In other words, clicking this button will close the information box. You should have prepared this button as an image before or you can use a button in the Cinema8 Image library.

Drag and drop the Image widget from the element panel to the timeline. Name it in the Properties panel. Set the Start and End time period to how long you want to show the element in the video. We set it to be visible throughout the video. Unmark the Visible feature because we don't want it to appear in the video without clicking the button.

5-  Click on the image element that you added as an overlay open button and go to the Properties panel. We will determine the action to be taken when it’s clicked.

Click Set Visible from the On Click list. Select the overlay image that will open when you click this open button from the Target Track list.

Click Add New On Click to add a new action. Click Set Visible from the list. Select the close image that will open when you click the open button from the Target Track list. Then, save it.

6-  Click on the image element you added as an overlay close button and go to the Properties panel. We will determine the action to be taken when it’s clicked.

Click Set Invisible from the On Click list. Select the overlay image that will close when you click the close button from the Target Track list.

Click Add New On Click to add a new action. Click Set Invisible from the list. Select the close image, which will close when you click the close button again from the Target Track list. Then, save it.

That's all!


    • Related Articles

    • How to Implement Text Overlay

      Sometimes you may want to give viewers extra information about a person, product, place, or event included in the video. While doing this, you can use text information popups within the video. Let's look at how to?; Create a project from the video ...
    • How to Implement Custom Size Video Overlay

      While viewers watching your video, they can click on an area in the video to open a full-screen video overlay and get extra information. Viewers can close this video overlay and resume the main video. The difference between Custom-Size Video Overlay ...
    • How to Implement Full Screen Video Overlay

      While viewers watching your video, they can click on an area in the video to open a different video overlay and get extra information. Viewers can close this video overlay and resume the main video. Let's look at how to. Create a project from the ...
    • Implementing Dynamic Dubbing in Cinema8

      In Cinema8, you can offer different language dubbing options to your audience. Let's see how to;     In this example, we will add 2 language options to video. When the video starts, the language option will be presented to the viewer, after making a ...
    • How to Earn Badges by Viewers' Choice w/Variables

      Using badges, which is one of the gamification elements, in your videos may increase the encouragement to watch your videos. Imagine that there are three questions in the video. If the audience answers two of these correctly, they will earn the ...