A fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects.

Today we’d like to share some artsy fun with you! We created some proof-of-concepts for simple media pop ups. The idea comes mainly from Forward Festival’s website and Tim Holman’s rad GifLinks project. We adventured ourselves with mix-blend-mode, masks and clip-path. Please keep in mind that this is a proof-of-concept with the aim to show a variety of effects.

Some of the effects use a CSS Masks technique; learn more about it here: Transition Effect with CSS Masks.

Attention: Some of these techniques are very experimental and won’t work in all browsers.

Here is an example of one of the effects. The paragraph with the pop text looks as follows:

<p class="content__paragraph content__paragraph--c1"> Much of the topography of North Dakota can be traced to the effects of Wisconsin-age glaciation, particularly in the north and east. Large portions of these <span id="trigger-1" class="pop-text" data-pop-text-out data-pop-media="media1">glaciated</span> areas are peppered by countless ponds and lakes. A frightening number have been drained; nevertheless, these wetlands constitute one of the most important waterfowl production areas in the country.</p>

What we do is to add the media pop up items right before the paragraphs and then we apply a blend mode to each block of text.

<div class="content content--blended"> <!-- Media 1 --> <div data-pop-media="media1" class="pop-media" style="background-image: url(img/1.jpg);"> <div class="pop-media__overlay pop-media__overlay--c1"></div> </div> <!-- other media items --> <p class="content__paragraph content__paragraph--c1"><!-- ... --></p> <!-- ... --> </div>

Using isolate, we make sure that the content does not blend with the background of the page:

.content--blended { isolation: isolate; } /* Individual paragraph colors and blend modes */ .content__paragraph--c1 { color: #6ae0fd; mix-blend-mode: color-dodge; } /* ... */

On hover (or touch), we then simply show the media item with any desired effect, or apply a class that triggers a CSS animation.

Note that browser support is very limited for some of the examples because of the experimental CSS properties we use. Others might work, though.

Chrome Supported

Firefox Not supported

Internet Explorer Not supported

Safari Supported

Opera Supported

We hope you enjoy these little fun effects and get inspired! Please don’t break the internet 😉

References and Credits