Blend Mode Experiment #2

HTML
<div class="content">Hello City</div> <section class="one"> <div class="wrapper"></div> </section> <section class="two"> <div class="wrapper"></div> </section> <section class="three"> <div class="wrapper"></div> </section> <section class="four"> <div class="wrapper"></div> </section>
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; } }
JAVASCRIPT
Expand for more options Login