@media (min-width: 651px) {
  #three-col a {
    transform: translateZ(0);
  }
  #three-col a *,
  #three-col a *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
  }
  #three-col a img {
    max-width: 100%;
    vertical-align: top;
    -webkit-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
  }
  #three-col a:before {
    background: #f9f9f9 url(../images/white-foam.jpg) top center repeat-y;
    position: absolute;
    content: '';
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    z-index: 1;
    bottom: 100%;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 40px white;
    opacity: 0.6;
  }
  #three-col a .hover-content {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  #three-col a .hover-content,
  #three-col a .hover-content span {
    visibility: hidden;
    z-index: 2;
  }

  #three-col a:hover img {
    opacity: 0.2;
  }
  #three-col a:hover:before {
    bottom: 0;
    box-shadow: 0 0 0px white;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  #three-col a:hover .hover-content,
  #three-col a:hover .hover-content span {
    visibility: visible;
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
  }
  .one-third:hover .outer-title {
    display: none;
  }
}