Creative Dissection Puzzles with CSS and SVG

styles.scss

/* Basic styles for pieces */

.clip-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.clip {
  position: absolute;
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}