<div class="box">
  <div class="box-default">default</div>

  <div class="box-top-position"></div>
  <div class="box-top-contents">top</div>

  <div class="box-right-position"></div>
  <div class="box-right-contents">right</div>

  <div class="box-bottom-position"></div>
  <div class="box-bottom-contents">bottom</div>

  <div class="box-left-position"></div>
  <div class="box-left-contents">left</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Lato:700');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
.box {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-size: 1.8rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  &-default {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background: #555;
  }
  &-top-contents {
    background: #3498db;
  }
  &-right-contents {
    background: #2ecc71;
  }
  &-bottom-contents {
    background: #e74c3c;
  }
  &-left-contents {
    background: #f1c40f;
  }
  &-top-position {
    top: 0;
    right: 0;
    transform-origin: 100% 0;
  }
  &-right-position {
    right: 0;
    bottom: 0;
    transform-origin: 100% 100%;
  }
  &-bottom-position {
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
  }
  &-left-position {
    top: 0;
    left: 0;
    transform-origin: 0 0;
  }
}
[class$="-contents"] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: .15s ease-in-out;
}
[class$="-position"] {
  position: absolute;
  z-index: 3;
  width: 70.7%;
  height: 70.7%;
  transform: rotate(45deg);
}
[class$="-contents"]:hover,
[class$="-position"]:hover + [class$="-contents"] {
  z-index: 4;
  opacity: 1;
  visibility: visible;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.