<div class=units>
<div>trinket</div>
<div>trinket</div>
</div>
/* reflection */
.units > :last-child {
transform: rotatex(180deg) translatey(15px);
mask-image: radial-gradient(circle at center, white, transparent 50%);
-webkit-mask-image: radial-gradient(circle at center, white, transparent 50%);
}
/* original design */
.units > * {
font: bolder 5rem/5rem "EB Garamond";
background-image: url(photo-1579268351234-073f85929562?w=200&q=80);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.units {
width: max-content;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
pointer-events: none;
padding: 0 10px;
display: inline-block;
}
body {
text-align: center;
margin-top: calc(50vh - 5rem);
}
/* This is a demo code only */
This Pen doesn't use any external JavaScript resources.