Link to article: Bleeps' Lab.
.glasscase{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.glassyeye{
aspect-ratio : 1 / 1;
width: 50%;
margin-top: -24px;
position: relative;
transition: 0.5s !important;
}
.glassyeye:hover{
filter: hue-rotate(180deg);
}
.glassyeye img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.allfolks{
position: absolute;
z-index: 5;
top: 0px;
left: 10px;
font-size: 4vh;
mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(9);
}
.allfolks a{
font-weight: bold;
color:red !important;
}
@media screen and (min-width: 1200px) {
.allfolks{
font-size: 25px;
}
}
@media screen and (max-width: 640px) {
.glasscase{
flex-direction: column;
}
.allfolks{
font-size: 4vw;
top: 3px;
}
.glassyeye{
margin-top: 0px;
width: 100%;
}
}glasscaseglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeallfolksglassyeyeglassyeyeallfolks