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}
}
