Module Shape

index.html

<div class="container">

  <div class="module">
    <div id="shape" class="module__shape ">
      <div class="module__shape-shadow-1"></div>
      <div class="module__shape-shadow-2"></div>
      <div class="module__shape-shadow-3"></div>

      <div class="module__shape-rec1"></div>
      <div class="module__shape-rec2"></div>
      <div class="module__shape-rec3"></div>
      <div class="module__shape-rec4"></div>

      <div class="module__shape-hover1"></div>
      <div class="module__shape-hover2"></div>
      <div class="module__shape-hover3"></div>
      <div class="module__shape-hover4"></div>
    </div>
  </div>

module-shape.markdown

Module Shape

A Pen by Simon on CodePen.

License.

style.scss

/// Globals

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/// variables

$Green100: #c8e6c9;
$Blue50: #e3f2fd;

/// Mixins

@mixin Center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin Rectangle {
  position: absolute;
  width: 12.5rem;
  height: 30rem;
  border-radius: 4px;
}

@mixin HollowRectangle {
  position: absolute;
  width: 12.5rem;
  height: 30rem;
}

/// container{
.container {
  width: 100%;
  height: 100vh;
  background-color: $Blue50;

  @include Center;
}

/// Actual Code

.module {
  width: 30rem;
  height: 30rem;

  @include Center;

  &__shape {
    position: relative;
    width: 30rem;
    height: 30rem;
    @include Center;

    &:hover {
      transform: translateY(-5px);
      transition: transform 0.5s;
    }

    &:hover + .module__content {
      transform: translateY(-7px);
      transition: transform 0.2s;
    }

    &:hover > div {
      cursor: pointer;
      background-color: darken($Green100, 5%);
    }

    &:hover > &-shadow-1 {
      box-shadow: 0px 8px 8px 0px darken($Blue50, 10%);
    }

    &:hover > &-shadow-2 {
      box-shadow: 0px -8px 8px 0px darken($Blue50, 10%);
    }

    &:hover > &-shadow-3 {
      box-shadow: 0px 8px 8px 0px darken($Blue50, 10%);
    }

    &-shadow {
      &-1 {
        @include Rectangle;
        transform: rotate(-45deg);
        box-shadow: 0px 8px 8px 0px darken($Blue50, 5%);
      }

      &-2 {
        @include Rectangle;
        transform: rotate(90deg);
        box-shadow: 0px -8px 8px 0px darken($Blue50, 5%);
      }

      &-3 {
        @include Rectangle;
        box-shadow: 0px 8px 8px 0px darken($Blue50, 5%);
      }
    }

    &-rec1 {
      transform: rotate(45deg);
      @include Rectangle;
      border-top: 1px solid darken($Green100, 10%);
      border-bottom: 1px solid darken($Green100, 10%);
      background-color: $Green100;
    }

    &-rec2 {
      transform: rotate(-45deg);
      @include Rectangle;
      border-top: 1px solid darken($Green100, 10%);
      border-bottom: 1px solid darken($Green100, 10%);
      background-color: $Green100;
    }

    &-rec3 {
      @include Rectangle;
      border-top: 1px solid darken($Green100, 10%);
      border-bottom: 1px solid darken($Green100, 10%);
      background-color: $Green100;
    }

    &-rec4 {
      transform: rotate(90deg);
      @include Rectangle;
      border-top: 1px solid darken($Green100, 10%);
      border-bottom: 1px solid darken($Green100, 10%);
      background-color: $Green100;
    }
  }
}