Эффект всплывающих изображений

demosourse

Забавный эксперимент в котором реализованы различного рода эффекты всплывающих изображений.

Внимание: данные примеры предназначены для работы в современных браузерах.

Вот пример одного из эффектов:

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

Теперь нам необходимо добавить медиа ресурс, который будет отображаться при наведении курсора мыши по соответствующей части текста.

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

Опция isolate не позволит изображению слиться с фоном:

.content--blended {
	isolation: isolate;
}

.content__paragraph--c1 {
	color: #6ae0fd;
	mix-blend-mode: color-dodge;
}

/* ... */

При наведении курсором мыши (или при прикосновении) мы отобразим изображение в сопровождении CSS анимации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2016/11/01/media-pop-up-effect/
Перевел: Станислав Протасевич
Урок создан: 2 Ноября 2016
Просмотров: 4893
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^