.tn {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 3px;
  outline: 0;
  transition: all .3s ease-in-out;
  color: #000;
  text-decoration: none;
}
a.tn:hover{
  transform: translateY(2px);
}
a.tn:active{
  transform: translateY(4px);
}

.tn .animate-showOnHover {
  overflow: hidden;
  max-height: 0;
  transition: all .75s ease-in-out;
}

.tn:hover .animate-showOnHover {
  margin-top: 10px;
  max-height: 100%;
}


.tn__border {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25px;
  border-radius:3px 3px 0 0;
  background-color:red;
  background-size:200%;
  animation-name:gradient;
  animation-iteration-count:infinite;
  z-index:9;
}



.tn figure {
  background-image:inherit;
  background-size:cover;
  background-position:center;
  position:relative;
  width:100%;
  height:100%;
  border-radius:3px
}



.tn__shadow {
  position:absolute;
  bottom:-12px;
  left:8%;
  width:84%;
  height:50%;
  background:inherit;
  background-size: 100%;
  -webkit-filter:blur(20px) saturate(3) brightness(0.7);
  filter:blur(20px) saturate(3) brightness(0.7);
  z-index:-1;
  pointer-events:none;
  transition:all .3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tn:hover .tn__shadow {
  bottom:-5px;
  left:4%;
  width:92%;
  -webkit-filter:blur(5px) saturate(3) brightness(0.7);
  filter:blur(5px) saturate(3) brightness(0.7)
}
.tn:active .tn__shadow {
  bottom:-3px;
  left:4%;
  width:92%;
  -webkit-filter:blur(3px) saturate(3) brightness(0.7);
  filter:blur(3px) saturate(3) brightness(0.7)
}

/* Special cases */

.tn-blog-text {
  transition: height .5s ease;
}
.tn-blog-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(241,245,248,1) 100%);
}
.tn--blog:hover .tn-blog-text {
  height: 100%;
}