<section class="white-bg">
  <a class="title">Awesome snowflakes</a>
  <a class="title-2">Awesome and beautiful</a>
  <a href="https://www.flickr.com/photos/chaoticmind75/">Images by Alexey Kljatov</a>
</section>

<section class="blur-container snowflake-1">  
</section>

<section class="blur-container snowflake-2">  
</section>

<section class="blur-container snowflake-3">  
</section>

<section class="blur-container snowflake-4">  
</section>

<section class="blur-container snowflake-5">  
</section>

section{
  height: 100vh;
  display: flex;
  position: relative;
}

.white-bg {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .title, .title-2, a {
    display: block;
    margin-bottom: 20px;
  }
  .title {
    color: #18a3d2;
    font-size: 52px;
    font-wieght: 700;
    border-bottom: 0.2em solid #18a3d2;
    position: relative;
    text-decoration: none;
    transition: color 0.2s;
    &:after {
      background-color: #95def6;
      bottom: -0.2em;
      content: "";
      display: inline-block;
      left: 0;
      opacity: 0;
      position: absolute;
      height: 0.2em;
      transition: width 0.4s;
      width: 1px;
    }
    &:hover, &:focus, &:active {
      color: #76d4f3;
      cursor: pointer;
      &:after {
        opacity: 1;
        width: 100%;
      }
    }
  }
  .title-2 {
    color: #8193f3;
    font-size: 32px;
    font-wieght: 700;
    border-bottom: 0.2em solid #8193f3;
    position: relative;
    text-decoration: none;
    transition: color 0.3s;
    &:after {
      background-color: #c5ccf6;
      bottom: -0.2em;
      content: "";
      display: inline-block;
      left: 0;
      opacity: 0;
      position: absolute;
      height: 0.2em;
      transition: height 0.3s;
      width: 1px;
    }
    &:hover, &:focus, &:active {
      color: #a8b3f2;
      cursor: pointer;
      &:after {
        opacity: 1;
        width: 100%;
        height: 0.3em;
      }
    }
  }
  a {
    color: grey;
    &:hover, &:focus, &:active {
      text-decoration: none;
    }
  }
  h2 {
    font-size: 18px;
    font-wieght: 400;
  }
}

.blur-container{
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  
  &::before, &::after{
    top: 0px;
    left: 0px;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
}

.snowflake-1 {
  background: url('https://d3i6fh83elv35t.cloudfront.net/newshour/wp-content/uploads/2015/12/snowflake7.jpg');
}

.snowflake-2 {
  background: url('https://d3i6fh83elv35t.cloudfront.net/newshour/wp-content/uploads/2015/12/snowflake3.jpg');
}

.snowflake-3 {
  background: url('http://www.luvthat.com/wp-content/uploads/2016/01/transparent-hexagon-snowflake.jpg');
}

.snowflake-4 {
  background: url('https://synkroniciti.files.wordpress.com/2013/12/10738494123_f8016decb5_b.jpg');
}

.snowflake-5 {
  background: url('http://www.deluxebattery.com/wp-content/uploads/2013/12/alexey-kljatov-photography-snowflakes-09.jpg');
}