<div class="backdrop taito">
	<p class="text taito">Taitō</p>
</div>

<div class="backdrop shibuya">
	<p class="text shibuya">Shibuya</p>
</div>

<div class="backdrop shinjuku">
	<p class="text shinjuku">Shinjuku</p>
</div>
.backdrop {
	background-size: contain;
	background-position: center;
	margin: auto;
	margin-top: 40px;
	width: 75vw;
}

.backdrop.taito {
	background-image: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg");
}

.backdrop.shibuya {
	background-image: url("https://rpsthecoder.github.io/img-repo/Shibuya%20by%20Alex%20Knight.jpg");
}
.backdrop.shinjuku {
	background-image: url("https://rpsthecoder.github.io/img-repo/Shinjuku%20by%20Benjamin%20Hung.jpg");
}

.text {
	color: white;
	border: 4px white solid;
	mix-blend-mode: multiply;
	font: bolder 12vw monospace;
	text-align: center;
	margin: 0;
	cursor: pointer;
	transition: text-indent 0.5s;
}

.text:hover {
	text-indent: 5px;
	transition: text-indent 0.5s;
}

.text:hover::before {
	display: inline-block;
	content: "✈︎";
}

.text.taito {
	font-family: "Alfa Slab One", cursive;
	background-color: rgba(59, 2, 6, 1);
	outline: 4px rgba(59, 2, 6, 1) solid;
}

.text.shibuya {
	font-family: "Bungee Shade", cursive;
	background-color: rgba(2, 22, 48, 1);
	outline: 4px rgba(2, 22, 48, 1) solid;
	font-size: 10vw;
}

.text.shinjuku {
	font-family: "Jacques Francois Shadow", cursive;
	background-color: rgba(50, 6, 43, 1);
	outline: 4px rgba(50, 6, 43, 1) solid;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.