section.fanned

  div.artwork(el=".artwork")
    p .artwork
    picture.artwork__image(el=".artwork__image")
      img(src="")

  div
    button#fan-button Fan/Unfan
    p Check/uncheck to show/hide:
    ol.showhide
      li
        input#o(type="checkbox" data-target=".artwork" data-ps="bg" checked)
        label(for="o") .artwork
      li
        input#ob(type="checkbox" data-target=".artwork" data-ps="before" checked)
        label(for="ob") .artwork::before
      li
        input#oa(type="checkbox" data-target=".artwork" data-ps="after" checked)
        label(for="oa") .artwork::after
      li
        input#i(type="checkbox" data-target=".artwork__image" data-ps="bg" checked)
        label(for="i") .artwork__image
      li
        input#ib(type="checkbox" data-target=".artwork__image" data-ps="before" checked)
        label(for="ib") .artwork__image::before
      li
        input#ia(type="checkbox" data-target=".artwork__image" data-ps="after" checked)
        label(for="ia") .artwork__image::after
View Compiled
:root {
  --outer-bg: antiquewhite;
  --inner-bg: powderblue;
  --child1-bg: palegreen;
  --child2-bg: pink;
}

$fan: 0.67rem;

.artwork, .artwork__image {
  width: 400px;
  height: 13 * 1.2rem;
  font-size: 2rem;
  
  &, &::before, &::after {
    color: black;
    outline: 1px solid transparent;
    transition: transform 1s, outline 0.2s, margin 1s;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
  }
  
  &::after, &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.artwork {
  min-width: 400px;
  position: relative;
  margin-right: 1em;
  --bg: var(--outer-bg);
}

.artwork__image {
  position: absolute;
  top: 0; left: 0;
}

.artwork__image {
  --bg: var(--inner-bg);
}

.artwork, .artwork__image {
  &::before {
    content: attr(el) "::before";
  }
  &::after {
    content: attr(el) "::after";
  }
}

.hidden-before::before,
.hidden-after::after {
  display: none !important;
}

.hidden-bg {
  background: transparent;
  color: transparent;
  outline: none !important;
}

.hidden-bg img {
  display: none !important;
}

[for^=o] { background: var(--outer-bg); }
[for^=i] { background: var(--inner-bg); }

.fanned {
  .artwork, .artwork__image, ::after, ::before {
    outline-color: gray;
  }
  
  .artwork {
    margin-right: $fan * 12;
    transform: skew(0deg, -10deg);
    &::before {
      transform: translate3d($fan, $fan, 0px);
    }
    &::after {
      transform: translate3d($fan * 5, $fan * 5, 0px);
    }
  }
  
  .artwork__image {
    transform: translate3d($fan * 2, $fan * 2, 0px);
    &::before {
      transform: translate3d($fan, $fan, 0px);
    }
    &::after {
      transform: translate3d($fan * 2, $fan * 2, 0px);
    }
  }
}

// Basic styles

html {
  font-family: sans-serif;
  line-height: 1.2;
}

p {
  margin: 0;
}

section {
  display: flex;
}

ol {
  margin: 0;
  font-family: monospace;
  list-style-position: inside;
  padding-left: 0.5em;
  list-style-type: disc;
  > li > ol { list-style-type: circle;
    > li > ol { list-style-type: square;
      > li > ol { list-style-type: disc; }
    }
  }
}
document.addEventListener("DOMContentLoaded", function() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("change", function(e) {
      var targetClass = e.target.dataset.target;
      var ps = e.target.dataset.ps;

      var targetElement = document.querySelector(targetClass);
      document.querySelector(targetClass).classList.toggle('hidden-' + ps);
    });
  }

  var fanButton = document.querySelector("#fan-button");
  fanButton.addEventListener("click", function(e) {
    var section = document.querySelector('section');
    section.classList.toggle('fanned');
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.