Artsy Media Pop Up Effect


View demo Download source

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.


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>

	<!-- other media items -->

	<p class="content__paragraph content__paragraph--c1"><!-- ... --></p>

	<!-- ... --> 

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.

Browser Support:

  • ChromeSupported
  • FirefoxNot supported
  • Internet ExplorerNot supported
  • SafariSupported
  • OperaSupported

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


References and Credits

View demo Download source

Artsy Media Pop Up Effect was written by Mary Lou and published on Codrops.