Glass Blurr Test

by Marius Jopen

HTML

<article class='glass'>
  <h1>Pelican</h1>
</article>

CSS

body {
  background-size: cover;
}

html, 
body, 
article, 
.glass::before {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glass {
  position: relative;
  background-color: white;
  transform: translateY(100%) translateY(-5em) translateZ(0);
}

.glass::before {
  z-index: -1;
  display: block;
  position: absolute;
  content: ' ';
  -webkit-filter: url('#blur');
  filter: url('#blur');
  -webkit-filter: blur(5px);
  filter: blur(5px);
  background-size: cover;
  opacity: 0.5;
  transform: translateY(-100%) translateY(5em) translateZ(0);
}



body, 
.glass::before {
  background-image: url('https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg');
}