Artsy Media Pop Up Effect

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.

mediapopupeffect_800x600

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.

mediapopupeffect_01

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>

mediapopupeffect_03

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;
}

/* ... */

mediapopupeffect_04

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 ;)

mediapopupeffect_05

References and Credits

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 14

  1. 2

    Implemented and works for me in Chrome and Firefox. I guess IE is not fierce enough.

    Manoela: I don’t know what I will do without you! You are my Alzheimer’s medicine!

  2. 4

    Amazing! Only ML can make North Dakota fun and interesting…(just kidding, I actually kinda like N. Dakota). Good work as usual. Thanks much.

  3. 11

    Only works on Edge for me. Doesn’t work on the latest Chrome (54). Could be I have some flags that are blocking it.

Follow this discussion

Leave a Comment