SCSS
%box {
box-sizing: border-box;
display: block;
font-size: 4em;
padding: 1em;
width: 8em;
height: 3em;
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.content {
@extend %box;
font-weight: bold;
text-align: center;
z-index: 1000;
background: #ecf0f1;
color: #000;
mix-blend-mode: lighten;
}
section {
background-repeat: no-repeat;
background-size: cover;
isolation: isolate;
position: relative;
height: 100vh;
padding: 1em;
}
.wrapper {
clip: rect(auto auto auto auto);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&:before {
content: " ";
@extend %box;
padding: 2em 4.5em;
mix-blend-mode: darken;
}
}
.one {
background-image: url(https://hd.unsplash.com/photo-1419193217437-b64efac4f132);
background-position: 80%;
.wrapper:before {
background: red;
}
}
.two {
background-image: url(https://hd.unsplash.com/photo-1423655156442-ccc11daa4e99);
.wrapper:before {
background: #faaa54;
mix-blend-mode: difference;
}
}
.three {
background-image: url(https://hd.unsplash.com/photo-1428342628092-61f9e5d578f2);
.wrapper:before {
background: #6c320a;
mix-blend-mode: screen;
}
}
.four {
background-image: url(https://hd.unsplash.com/photo-1444084316824-dc26d6657664);
.wrapper:before {
background: #e4135d;
}
}
1 Response