html {
  background: #181818;
  line-height: 1.5;
}
body {
  color: #cecece;
  background: #222;
  max-width: 80rem;
  margin: 0 auto;
  font-family: 'Courier New', Courier, monospace;
}

h2 {
  font-size: 2em;
  text-align: center;
}

h1::before {
  content: '✔';
  color: seagreen;
}

div {
  height: 100px;
  margin-bottom: 50px;
}

/* heigth / overflow */
div:nth-of-type(1) {
  height: 0;
  overflow: hidden;
}

h1:nth-of-type(1):hover + div {
  height: auto;
}

/* visibility */

div:nth-of-type(2) {
  visibility: hidden;
}

h1:nth-of-type(2):hover + div {
  visibility: visible;
}
/* opacity */
div:nth-of-type(3) {
  opacity: 0;
}

h1:nth-of-type(3):hover + div {
  opacity: 1;
}

/* display */

div:nth-of-type(4) {
  display: none;
}

h1:nth-of-type(4):hover + div {
  display: block;
}

/* translate */

div:nth-of-type(5) {
  translate: -200%;
}

h1:nth-of-type(5):hover + div {
  translate: 0;
}

/* clip-path */
div:nth-of-type(6) {
  clip-path: circle(0);
}

h1:nth-of-type(6):hover + div {
  clip-path: none;
}