<div class="ntt--album-cover-images--square">
<div class="ntt--cr">
<div class="copy">
<span class="beware">Beware</span>
<span class="the">the</span>
<span class="pixel">Pixel</span>
<span class="police">Police</span>
</div>
<img src="https://source.unsplash.com/1600x900/?police" width="1600" height="900" alt="Unsplash Photo">
</div>
</div>
body{margin:0;}
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Permanent+Marker&display=swap");
.ntt--album-cover-images--square {
position: relative;
padding: 0;
&::before {
content: "";
display: block;
padding-top: calc((1 / 1) * 100%);
width: 100%;
}
> .ntt--cr {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: red;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
heigt: 100%;
background-color: black;
opacity: 0.25;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
mix-blend-mode: multiply;
}
.copy {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
padding: 0.25em;
color: white;
font-size: 4em;
font-size: clamp(1em, 15vw, 6em);
line-height: 1;
font-family: "Montserrat", sans-serif;
.beware {
display: block;
transform: rotate(-6deg) translatey(-0.25em);
font-size: 1.25em;
text-shadow: -.0625em .0625em red;
font-family: "Permanent Marker", cursive;
}
.the {
display: block;
text-transform: uppercase;
vertical-align: middle;
font-size: 0.5em;
}
.pixel,
.police {
display: block;
text-transform: uppercase;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.