Reveal Video

Interactions

Reveal sections of a hidden video on hover.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

In this example, we created a site that displays sections of a hidden video as a visitor hovers over an area.

We hid a video behind a grid of black squares. When a visitor hovers over the squares they become transparent, revealing sections of the video. After a short period of time the squares revert to their opaque state, hiding those parts of the video again.​

How We Built It

We set up this fun site using just a few page elements and several lines of code.​

Page Elements

We added the following elements to our page:

  • A column strip with a video background.

  • An overlapping repeater with a single item. The item consists of a black box inside a square container, and a text element displaying a plus sign. We duplicate this item later using code.

Code

We added the following functions to our site:

  • addMaskingBoxes(): When the page loads, this function duplicates our black box repeater item 95 times until it covers the video strip.

  • maskingBox_mouseIn(): We connected this event handler for the box in the Properties panel. When a visitor hovers over a box, we change the background color to transparent by setting the alpha parameter of the rgba() function to 0.0,. After a timeout (delay) of 1 second, we set the alpha value of the rgba() function to 1.0, reverting the box’s background color to opaque black.

 

Note that we use the at() function to define the scope for the $item selector as repeated item scope, which applies to a specific item in the repeater. This means that only the box the visitor hovered on becomes transparent, and not all boxes in the repeater.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

Hide & Show

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode