How to make transition on mouse leave reverse to hover transition

Question

I need to make animation of product's :hover state nice and smooth preferably using css only.

I made this codepen: http://codepen.io/Nitoiti/pen/BLmbZd

.productWrapper {
  width: 235px;
  height: 235px;
}
.info {
  position: relative;
}
.productDescription {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}
.productDescription:hover {
  opacity: 1;
}
.productWrapper .sku {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;
}
.hoverBG {
  left: 0;
  position: absolute;
  top: 0;
  background: rgba(0, 163, 196, 1);
  background: -moz-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 163, 196, 0.8)), color-stop(100%, rgba(13, 204, 201, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00a3c4', endColorstr='#0dccc9', GradientType=0);
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  z-index: 2;
}
.productDescription {
  z-index: 3;
  left: 0;
  position: absolute;
  top: 0;
  color: #ffffff;
  padding: 15px;
  height: 100%;
  opacity: 0;
  transition: opasity 0.3s linear;
}
.productWrapper:hover .hoverBG {
  opacity: 1;
  //transition:all 0.3s ease 0s;

}
.productWrapper .productDescription .buttonsWrapper a {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  text-align: center;
  font-size: 2em;
  color: #fff;
}
.productWrapper .productDescription .buttonsWrapper a .buttonBG {
  background: #09848e none repeat scroll 0 0;
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.productWrapper .productDescription .buttonsWrapper a:hover .buttonBG {
  background: #005960 none repeat scroll 0 0;
}
.productDescription .buttonsWrapper {
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.productWrapper .productDescription .buttonsWrapper a:last-child {
  margin-right: 0px;
}
.buttonsWrapper a {
  margin-top: 150px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.buttonsWrapper a:nth-child(2) {
  transition: margin-top 0.2s 0.15s, transform 0.3s 0.35s;
}
.buttonsWrapper a:nth-child(3) {
  transition: margin-top 0.3s 0.15s, transform 0.3s 0.45s;
}
.productWrapper:hover .buttonsWrapper a {
  margin-top: 0px;
  transform: translatey(20%);
}
.productWrapper .sku {
  margin-top: 10px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.productWrapper:hover .sku {
  margin-top: 25px;
  transform: translatey(-5px);
}
.buttonsWrapper {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="productWrapper">
  <div class="info">
    <img src="http://test2.grey-cat.biz/img/image-square-3.png">
    <div class="hoverBG"></div>
    <div class="productDescription">
      <div class="sku">SKU: 3610</div>
      <div class="buttonsWrapper">
        <a href="#">
          <span class="buttonBG"></span> 1
        </a>
        <a href="#">
          <span class="buttonBG"></span> 2
        </a>
        <a href="#">
          <span class="buttonBG"></span> 3
        </a>
      </div>
    </div>
  </div>
</div>

What happen here when you hover over image: 1. in 0,3s the background opacity changes to 1 and it becomes visible. 2. Buttons slide up one after another in short delay.

When you move mouse out buttons and background just fade. What I need is buttons slide down in the reverse order and after that background fades out. In other words I need animation to be opposite to hover.

I tried to use different transition effects for :hover and normal states but didn't manage to make it work. Is it possible to do this using css only?

Answer 1

I see a typo: opasity.

This was in the .productDescription rule:

transition: opasity 0.3s linear;

The transition in .productDescription applies when coming out of a different state (hover, focus, etc.). The typo prevented the properties from animating back to their non-hovered values when the cursor hovered away from the element.

I've copied your snippet and corrected:

.productWrapper {
  width: 235px;
  height: 235px;
}
.info {
  position: relative;
}
.productDescription {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}
.productDescription:hover {
  opacity: 1;
}
.productWrapper .sku {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;
}
.hoverBG {
  left: 0;
  position: absolute;
  top: 0;
  background: rgba(0, 163, 196, 1);
  background: -moz-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 163, 196, 0.8)), color-stop(100%, rgba(13, 204, 201, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00a3c4', endColorstr='#0dccc9', GradientType=0);
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  z-index: 2;
}
.productDescription {
  z-index: 3;
  left: 0;
  position: absolute;
  top: 0;
  color: #ffffff;
  padding: 15px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.productWrapper:hover .hoverBG {
  opacity: 1;
  //transition:all 0.3s ease 0s;

}
.productWrapper .productDescription .buttonsWrapper a {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  text-align: center;
  font-size: 2em;
  color: #fff;
}
.productWrapper .productDescription .buttonsWrapper a .buttonBG {
  background: #09848e none repeat scroll 0 0;
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.productWrapper .productDescription .buttonsWrapper a:hover .buttonBG {
  background: #005960 none repeat scroll 0 0;
}
.productDescription .buttonsWrapper {
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.productWrapper .productDescription .buttonsWrapper a:last-child {
  margin-right: 0px;
}
.buttonsWrapper a {
  margin-top: 150px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.buttonsWrapper a:nth-child(2) {
  transition: margin-top 0.2s 0.15s, transform 0.3s 0.35s;
}
.buttonsWrapper a:nth-child(3) {
  transition: margin-top 0.3s 0.15s, transform 0.3s 0.45s;
}
.productWrapper:hover .buttonsWrapper a {
  margin-top: 0px;
  transform: translatey(20%);
}
.productWrapper .sku {
  margin-top: 10px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.productWrapper:hover .sku {
  margin-top: 25px;
  transform: translatey(-5px);
}
.buttonsWrapper {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="productWrapper">
  <div class="info">
    <img src="http://test2.grey-cat.biz/img/image-square-3.png">
    <div class="hoverBG"></div>
    <div class="productDescription">
      <div class="sku">SKU: 3610</div>
      <div class="buttonsWrapper">
        <a href="#">
          <span class="buttonBG"></span> 1
        </a>
        <a href="#">
          <span class="buttonBG"></span> 2
        </a>
        <a href="#">
          <span class="buttonBG"></span> 3
        </a>
      </div>
    </div>
  </div>
</div>