SCSS
*, *:before, *:after {
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
list-style: none;
background: #eee;
li {
position: relative;
width: 50vw;
height: 50vh;
text-align: center;
background-image: url(http://img10.deviantart.net/e971/i/2015/041/4/7/star_wars__force_and_destiny_by_wraithdt-d8hg7ct.jpg);
background-position: center;
background-size: cover;
&:nth-child(1) {
background-color: #bada55;
background-blend-mode: luminosity;
a { mix-blend-mode: overlay; }
}
&:nth-child(2) {
background-color: #f02311;
background-blend-mode: color-burn;
a { mix-blend-mode: color-dodge; }
}
&:nth-child(3) {
background-color: #2a8fbd;
background-blend-mode: hard-light;
a { mix-blend-mode: soft-light; }
}
&:nth-child(4) {
background-color: white;
background-blend-mode: difference;
a { mix-blend-mode: exclusion; }
}
}
}
