html(lang="en-us")
head
  meta(charset="utf-8")
  meta(http-equiv="X-UA-Compatible", cntnt="IE=edge")
  title= name
  meta(name="viewport", cntnt="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")
  meta(name="description", cntnt= description)
  link(rel="stylesheet", href="css/#{name}.min.css")
  link(rel="stylesheet", href="css/theme.min.css")
body
  .ml
    .ml-pnl.ml-flp--md.ml-flp
      .ml-pnl__cntnt.ml-flp__cntnt
        img.ml-flp__pnl.ml-flp__pnl--frnt(src="img/photo-1.jpg")
        .ml-flp__pnl.ml-flp__pnl--bck.bg--green
          p Here is a flpped image...
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--green
        h1 Here is a masonry layout.
    .ml-pnl.ml-clstr.ml-clstr--hrz
      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
        .ml-pnl.ml-clstr__sgmnt
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
        .ml-pnl.ml-clstr__sgmnt.ml-clstr__sgmnt--hlf
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--red.tx--white
            p.
              Some cool pics.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--purple
        h3 That's pretty cool, thanks for showing me.
    .ml-pnl.ml-clstr.ml-clstr--vrt
      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn.ml-clstr__sgmnt--hlf
        .ml-pnl.ml-clstr__sgmnt
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--blue.tx--white
            p.
              This is an image, it's quite nice.
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--blue.tx--white
            a Click here to find out more.
    .ml-pnl.ml-pnl--fcs
      .ml-pnl__cntnt.tx--white.bg--green
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--red
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. Pellentesque lorem elit, dignissim interdum massa id, malesuada rutrum ligula. Suspendisse tempor quis mauris eu facilisis. Phasellus non volutpat diam, non dapibus ligula. Ut non molestie ex, nec sagittis mi. Curabitur suscipit tellus id dolor pretium blandit. Cras tristique tristique pharetra.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--green
        h2 Some post about something
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend.
    .ml-pnl
      img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml-pnl.ml-pnl--fcs
      .ml-pnl__cntnt.tx--white.bg--blue
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl.ml-pnl--pls
      img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml__fcs-crtn
View Compiled
/**
  * driveway.css - pure CSS masonry layouts aid.
*/
.ml {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  position: relative;
}
.ml--fcs .ml-pnl {
  position: relative;
}
.ml--fcs .ml-pnl:hover {
  z-index: 3;
}
.ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn {
  display: block;
}
.ml__fcs-crtn {
  background-color: #000;
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0.75;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
}
.ml * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 768px) {
  .ml {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}
@media (min-width: 1200px) {
  .ml {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}
.ml-pnl {
  margin: 0;
  padding: 5px;
}
.ml-pnl--fcs {
  position: relative;
}
.ml-pnl--fcs:hover {
  z-index: 3;
}
.ml-pnl--fcs:hover ~ .ml__fcs-crtn {
  display: block;
}
.ml-pnl--pls {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transition: -webkit-transform 0.25s ease 0s;
  transition: -webkit-transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
}
.ml-pnl--pls:hover {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
}
@media (min-width: 768px) {
  .ml-pnl {
    -webkit-column-break-inside: avoid;
       page-break-inside: avoid;
            break-inside: avoid;
  }
}
.ml-pnl__cntnt {
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}
.ml-pnl__cntnt--img {
  max-width: 100%;
  padding: 0;
}
.ml-flp {
  -webkit-perspective: 1000;
          perspective: 1000;
}
.ml-flp:hover .ml-flp__cntnt {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.ml-flp--md {
  height: 300px;
}
.ml-flp__pnl {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 10px;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
.ml-flp__pnl--frnt {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  z-index: 2;
}
.ml-flp__pnl--bck {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.ml-flp__cntnt {
  height: 100%;
  overflow: visible;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.ml-clstr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.ml-clstr--vrt {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr--vrt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.ml-clstr--hrz {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ml-clstr__sgmnt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.ml-clstr__sgmnt--rw {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr__sgmnt--rw {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.ml-clstr__sgmnt--clmn {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr__sgmnt--hlf {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
  .ml-clstr__sgmnt--qrt {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
  }
}

/**
  * Color styles
*/
.tx--white {
  color: #fff;
}
.bg--red {
  background-color: #e74c3c;
}
.bg--green {
  background-color: #26a65b;
}
.bg--purple {
  background-color: #8e44ad;
}
.bg--blue {
  background-color: #1e8bc3;
}
img {
  max-height: 300px;
  background-color: #f93;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.