MADMAX (moodboard)

<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Playfair+Display" rel="stylesheet">

<style>
#madmax{
  width: 500px;
  height: 600px;
  overflow: hidden;
  margin: 0px auto;
  position: relative;
  background: url(https://i.imgur.com/k2wpOGD.png);
}

#madmax a{
  text-decoration: none;
  cursor: crosshair;
}

#madmax .fade{
  width: 500px;
  height: 600px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  opacity: 0.8;
}

#madmax .box{
  width: 480px;
  height: 580px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  border: 1px dotted #fff;
  opacity: 0.7;
  -webkit-transition: 0.8s ease-in 2.6s;
  transition: 0.8s ease-in 2.6s;
}
#madmax:hover .box{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: 0.8s ease-in 0s;
  transition: 0.8s ease-in 0s;
}

#madmax .one{
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: 150px;
  left: 190px;
  -webkit-transition: 0.8s ease-in 2.6s;
  transition: 0.8s ease-in 2.6s;
  opacity: 1;
}
#madmax:hover .one{
  bottom: 620px;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: 0.8s ease-in 0s;
  transition: 0.8s ease-in 0s;
}

#madmax .icon{
  width: 130px;
  height: 130px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(https://i.imgur.com/tuJcs8D.gif);
  background-size: 130px;
  border-radius: 100px;
  opacity: 0.6;
}
#madmax .icon-ov{
  width: 130px;
  height: 130px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #F34E22;
  opacity: 0.55;
  border-radius: 100px;
}

#madmax .two{
  width: 300px;
  height: 170px;
  position: absolute;
  top: 180px;
  left: 80px;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
  -webkit-transition: 0.8s ease-in 2.6s;
  transition: 0.8s ease-in 2.6s;
  opacity: 1;
}
#madmax:hover .two{
  top: 620px;
  -webkit-transition: 0.8s ease-in 0s;
  transition: 0.8s ease-in 0s;
}

#madmax .two d{
  font-family: 'Alfa Slab One', cursive;
  font-size: 70px;
  text-transform: uppercase;
  color: #F76842;
  line-height: 55px;
  letter-spacing: 0px;
  padding-left: 5px;
  opacity: 0.7;
}
#madmax .two i{
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  letter-spacing: 26px;
  padding-left: 20px;
  line-height: 85px;
  text-transform: uppercase;
  color: #fff;
  border-top: 1px dotted #fff;
  padding-top: 8px;
  opacity: 0.75;
}

#madmax .cali{
  width: 460px;
  height: 400px;
  position: absolute;
  top: 105px;
  left: 20px;
  background: url(https://i.imgur.com/1NvnAMw.png);
  background-size: 700px;
  background-position: right;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  opacity: 0;
  -webkit-transition: 0.3s ease-in 2.2s;
  transition: 0.3s ease-in 2.2s;
}
#madmax:hover .cali{
  opacity: 1;
  -webkit-transition: 0.3s ease-in 1.2s;
  transition: 0.3s ease-in 1.2s;
}
#madmax .cali-ov{
  width: 460px;
  height: 400px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #F8CA00;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  opacity: 0.5;
}

#madmax .sweater{
  width: 180px;
  height: 170px;
  position: absolute;
  top: 20px;
  left: 20px;
  background: url(https://i.imgur.com/H1tmY0X.png);
  background-size: 180px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 1.8s;
  transition: 0.3s ease-in 1.8s;
}
#madmax:hover .sweater{
  opacity: 0.85;
  -webkit-transition: 0.3s ease-in 1.6s;
  transition: 0.3s ease-in 1.6s;
}
#madmax .sweater-ov{
  width: 180px;
  height: 170px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #490A3D;
  opacity: 0.55;
}

#madmax .arcade{
  width: 280px;
  height: 285px;
  position: absolute;
  top: 20px;
  right: 20px;
  background: url(https://i.imgur.com/WpHMXUs.png);
  background-size: 285px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 1.4s;
  transition: 0.3s ease-in 1.4s;
}
#madmax:hover .arcade{
  opacity: 0.9;
  -webkit-transition: 0.3s ease-in 2s;
  transition: 0.3s ease-in 2s;
}
#madmax .arcade-ov{
  width: 280px;
  height: 285px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: #8A9B0F;
  opacity: 0.6;
}

#madmax .bat{
  width: 180px;
  height: 275px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: url(https://i.imgur.com/5A2JV8w.png);
  background-size: 210px;
  background-position: top;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 1s;
  transition: 0.3s ease-in 1s;
}
#madmax:hover .bat{
  opacity: 0.8;
  -webkit-transition: 0.3s ease-in 2.4s;
  transition: 0.3s ease-in 2.4s;
}
#madmax .bat-ov{
  width: 180px;
  height: 275px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #000;
  opacity: 0.55;
}

#madmax .skate{
  width: 280px;
  height: 200px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: url(https://i.imgur.com/HmeoD0r.png);
  background-size: 280px;
  background-position: center;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 0.6s;
  transition: 0.3s ease-in 0.6s;
}
#madmax:hover .skate{
  opacity: 0.8;
  -webkit-transition: 0.3s ease-in 2.8s;
  transition: 0.3s ease-in 2.8s;
}
#madmax .skate-ov{
  width: 280px;
  height: 200px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: #BD1550;
  opacity: 0.55;
}

#madmax .zoomer{
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 140px;
  right: 100px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 0.2s;
  transition: 0.3s ease-in 0.2s;
}
#madmax:hover .zoomer{
  opacity: 0.98;
  -webkit-transition: 0.3s ease-in 3.2s;
  transition: 0.3s ease-in 3.2s;
}
#madmax .zoomer-ov{
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #F76842;
  border-radius: 100px;
  opacity: 0.5;
}
#madmax .zoomer img{
  width: 150px;
  height: 150px;
  border-radius: 100px;
}

</style>

<center>
<div id="madmax">

  <div class="fade"></div>
  <div class="box"></div>

  <div class="one">
     <div class="icon"></div>
     <div class="icon-ov"></div>
  </div>

  <div class="two">
    <d>maxine</d><br> <i>mayfield</i>
  </div>

  <div class="sweater">
  <div class="sweater-ov"></div></div>

  <div class="arcade">
  <div class="arcade-ov"></div></div>

  <div class="skate">
  <div class="skate-ov"></div></div>

  <div class="bat">
  <div class="bat-ov"></div></div>

  <div class="cali">
  <div class="cali-ov"></div></div>

  <div class="zoomer">
    <a href="http://candyland-couture.com/index.php?showuser=7400" title="hanie ©">
    <img src="https://i.imgur.com/z2qcG9L.gif">
    <div class="zoomer-ov"></div></a>
  </div>

</div>
</center>