.item{ 
  background-color: white;
  position: relative;
  display: inline-block;
  margin: 1% 2% 1% 0%;
  overflow: hidden;
  box-shadow: 2px 3px 10px #444444;
}

.item .overlay{
  color: #000;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: all 0.5s ease;
  position: absolute;
  top: 0; 
  bottom: 0;
}

.item-alt{ 
  background-color: white;
  position: relative;
  margin: 1% 2% 1% 0%;
  overflow: hidden;
  box-shadow: 2px 3px 10px #444444;
}

.item-alt .overlay{
  color: #000;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: all 0.5s ease;
  position: absolute;
  top: 0; 
  bottom: 0;
}

/* effect-clean*/
.clean .overlay span:nth-child(1){
  position: absolute;
  left: 30%;
  top: 35%;
  font-size: 80px;
  font-weight: bold;
  font-family: coustard;
  transform: translateX(-50%);
}

.clean .overlay span:nth-child(2){
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}

.clean .overlay span:nth-child(3){
  height: 3px;
  background-color: #000;
  position: absolute;
  top: 75%;
  left: 0;
}

.clean .overlay:hover{
  opacity: 0.93;
}

.clean .overlay:hover span:nth-child(1){
  animation: slide 0.4s;
}

.clean .overlay:hover span:nth-child(2){
  animation: slide 0.7s;
}

.clean .overlay:hover span:nth-child(3){
  animation: line 0.5s forwards;
}

@keyframes slide{
  0%   {transform:translateX(-10%);}
  100% {transform:translateX(-50%);}
}

@keyframes line{
  0%   {width: 0;}
  100% {width: 50%}
}


/* Rotate */
.hover06 figure:hover img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.hover06 figure img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

figure:hover+span {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
figure {
  bottom: -36px;
  opacity: 1;
}