3D Effect - Blend Mode

HTML
<div class="three-dee"></div>
SCSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .three-dee { margin: 30px auto 0; display: block; width: 400px; height: 400px; z-index: 2; outline: 3px solid cyan; background: url('http://orig15.deviantart.net/1e1f/f/2006/347/b/d/darth_vader_by_erwebb.png'), cyan; background-blend-mode: lighten; background-size: cover; &:after { content: ''; position: absolute; display: block; width: 400px; height: 400px; z-index: 3; background: url('http://orig15.deviantart.net/1e1f/f/2006/347/b/d/darth_vader_by_erwebb.png'), red; background-blend-mode: lighten; outline: 3px solid red; background-size: cover; mix-blend-mode: darken; animation: show-overlap 3s linear infinite alternate; } } @keyframes show-overlap { 0% { margin-left: 40px } 80% { margin-left: 0px} }
JAVASCRIPT
Expand for more options Login