eYYvwWb

eyyvwwb.markdown

eYYvwWb

A Pen by Saijo George on CodePen.

License.

index.html

    




<div class="row">
  <div class="column"><div id="wrapper">
      <img id="blurred" src="https://images.unsplash.com/photo-1503631285924-e1544dce8b28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" />
      <img id="cover" src="https://images.unsplash.com/photo-1503631285924-e1544dce8b28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" />
    </div></div>
  <div class="column">
<div id="wrapper">
      <img id="blurred" src="https://images.unsplash.com/photo-1486546910464-ec8e45c4a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=651&q=80" alt="" />
      <img id="cover" src="https://images.unsplash.com/photo-1486546910464-ec8e45c4a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=651&q=80" alt="" />
    </div></div>
</div>

style.css

body {
  background: #222;
}

#wrapper {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

#blurred {
  position: absolute;
  z-index: 0;
  filter: blur(100px);
}

#cover {
  z-index: 1;
  position: relative;
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}