Artsy Media Pop Up Effect

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.

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.

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

• Images from Pexels licensed under Creative Commons (CC0) and from Unsplash.com
• Vinyl icon from Round Icons
• Bird GIF from Giphy
• Bird sound from Soundbible
• Animations powered by anime.js by Julian Garnier