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.

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

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 16

Comments are closed.
  1. 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. 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. Only works on Edge for me. Doesn’t work on the latest Chrome (54). Could be I have some flags that are blocking it.

  4. I have known coderops for almost a year now. and i must say, this is the one single site that has the most impact in my career (am 2 years young), you have opened my eyes (in fact, you tore it) to lots of web design ideas and tricks. thank you very much this is really cool.