<div class="backdrop fire">
	<p class="text fire">FIRE</p>
	<div class="overlay fire"></div>
</div>

<div class="backdrop fire">
	<p class="text fire inverse">FIRE</p>
	<div class="overlay fire inverse"></div>
</div>

<div class="backdrop water">
	<p class="text water">Water</p>
	<div class="overlay water"></div>
</div>

<div class="backdrop water">
	<p class="text water inverse">Water</p>
	<div class="overlay water"></div>
</div>
.backdrop {
	width: 600px; height: 300px;
	position: relative;
	background-size: 100%;
	margin: 40px auto;
}
.text {
	color: black;
	background-color: white;
	mix-blend-mode:screen; 
	width: 100%; height: 100%;
	font-weight: bolder;
	text-align: center;
	line-height: 300px;
	margin: 0;
}
.inverse {
	color: white;
	background-color: black;
}
.backdrop
,.text {
	border-radius: 2px;
}
.overlay {
	width: 100%; height: 100%;
	position: absolute;
	top: 0;
	mix-blend-mode:multiply;
}

/* water */
.water.backdrop {
	background-image: url(https://images.unsplash.com/reserve/AXx3QORhRDKAMrbb8pX4_photo%202.JPG);
}
.water.overlay {
	background-color: rgba(0,255,255,.1);
}
.water.text {
	font-size: 160pt;
}

/* fire */
.fire.backdrop {
	background-image: url(https://66.media.tumblr.com/e454398961e0203f2aad001cf7d177bf/tumblr_mrztj7GFJA1sdyj9lo1_1280.jpg);
}
.fire.overlay{
	background-color: rgba(255,0,0,.1);
}
.fire.text{
	font-size: 165pt;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.