#1 dreamscape collages | demons that chased me

In this example below you will see how to do a #1 dreamscape collages | demons that chased me with some HTML / CSS and Javascript

CSS collage: (blend-modes & filters)Images:

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#1 dreamscape collages | demons that chased me</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="wrapper"> <img class="maze" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/maze.jpg"/><img class="woman" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/old_woman.jpg"/><img class="monster" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/monster.jpg"/></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pixelass/1-dreamscape-collages-or-demons-that-chased-me-VLqpYP */
* {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

html {
  background: #111;
}

body {
  overflow: hidden;
  height: 100vh;
  position: relative;
  margin: 0;
}

.wrapper {
  overflow: hidden;
  height: 100vmin;
  width: 100vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: frame 20s cubic-bezier(0.155, 0.97, 0.85, 0.025) infinite;
          animation: frame 20s cubic-bezier(0.155, 0.97, 0.85, 0.025) infinite;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

img {
  position: absolute;
}

.maze {
  height: 100%;
  top: 0%;
  left: 0%;
  mix-blend-mode: screen;
  opacity: 0.2;
  -webkit-animation: shake2 30s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
          animation: shake2 30s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
}

.woman {
  height: 100%;
  bottom: 0%;
  left: 0%;
  mix-blend-mode: color-dodge;
  opacity: 0.8;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-animation: woman 6s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
          animation: woman 6s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

.monster {
  height: 130%;
  top: 50%;
  left: 50%;
  mix-blend-mode: multiply;
  -webkit-animation: monster 10s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
          animation: monster 10s cubic-bezier(0.815, 0.36, 0.075, 0.71) infinite;
}

@-webkit-keyframes monster {
  0%, 100% {
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
    -webkit-transform: translate(3.4%, -0.6%) translate(-50%, -50%);
            transform: translate(3.4%, -0.6%) translate(-50%, -50%);
  }
  20% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    -webkit-transform: translate(-0.6%, 4.4%) translate(-50%, -50%);
            transform: translate(-0.6%, 4.4%) translate(-50%, -50%);
  }
  50% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
    -webkit-transform: translate(-0.4%, -0.2%) translate(-50%, -50%);
            transform: translate(-0.4%, -0.2%) translate(-50%, -50%);
  }
  70% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -webkit-transform: translate(0.9%, 0.4%) translate(-50%, -50%);
            transform: translate(0.9%, 0.4%) translate(-50%, -50%);
    opacity: 0.4;
  }
}

@keyframes monster {
  0%, 100% {
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
    -webkit-transform: translate(3.4%, -0.6%) translate(-50%, -50%);
            transform: translate(3.4%, -0.6%) translate(-50%, -50%);
  }
  20% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    -webkit-transform: translate(-0.6%, 4.4%) translate(-50%, -50%);
            transform: translate(-0.6%, 4.4%) translate(-50%, -50%);
  }
  50% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
    -webkit-transform: translate(-0.4%, -0.2%) translate(-50%, -50%);
            transform: translate(-0.4%, -0.2%) translate(-50%, -50%);
  }
  70% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -webkit-transform: translate(0.9%, 0.4%) translate(-50%, -50%);
            transform: translate(0.9%, 0.4%) translate(-50%, -50%);
    opacity: 0.4;
  }
}
@-webkit-keyframes frame {
  0%, 100% {
    background: #321;
  }
  50% {
    background: #123;
  }
}
@keyframes frame {
  0%, 100% {
    background: #321;
  }
  50% {
    background: #123;
  }
}
@-webkit-keyframes woman {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
}
@keyframes woman {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
}
@-webkit-keyframes maze {
  0%, 100% {
    -webkit-transform: translate(2.4%, 0.7%) scale(1.3);
            transform: translate(2.4%, 0.7%) scale(1.3);
  }
  50% {
    -webkit-transform: translate(0.4%, -5.4%) scale(1.3);
            transform: translate(0.4%, -5.4%) scale(1.3);
  }
}
@keyframes maze {
  0%, 100% {
    -webkit-transform: translate(2.4%, 0.7%) scale(1.3);
            transform: translate(2.4%, 0.7%) scale(1.3);
  }
  50% {
    -webkit-transform: translate(0.4%, -5.4%) scale(1.3);
            transform: translate(0.4%, -5.4%) scale(1.3);
  }
}

Comments