SCSS
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
$total-height:100%;
$colors: #002ac2, red, #748386, #084700, #333, #BACBA9;
html, body {
min-height:100%;
height:100%;
margin:0;
font-family: 'Oswald', sans-serif;
}
body {
background-color: hsla(186, 100%, 39%, 1);
min-height:100%;
}
div{
height: $total-height / 3;
margin:0;
padding:0;
cursor:pointer;
overflow:hidden;
background-image: url("https://static.pexels.com/wp-content/uploads/2014/11/abstract-dark-lights-3616-825x550.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: -50% 50%;
background-blend-mode: multiply;
display:flex;
align-items: center;
justify-content: center;
}
div::after {
font-size:10vw;
color:rgba(255,255,255, 0.3);
text-transform:uppercase;
}
div:nth-child(1)::after {
content:"this";
}
div:nth-child(2)::after {
content:"is";
}
div:nth-child(3)::after {
content:"a christmas";
}
div:nth-child(4)::after {
content:"blending";
}
div:nth-child(5)::after {
content:"exercise";
}
//inspired from http://codepen.io/cimmanon/pen/yoCDG
@for $i from 1 through length($colors) {
div:nth-child(#{length($colors)}n+#{$i}) {
background-color: nth($colors, $i);
transition: background-color 2s;
&:hover{
background-blend-mode: hard-light;
background-color:green;
}
}
}
