JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<figure class="klasenu_tnilagem">
	<img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zotredsa.jpg" alt="zornet.ru"/>
	<div>
		<a href="http://zornet.ru"><i class="ion-ios-star-outline left-icon"></i></a>
		<a href="http://zornet.ru"><i class="ion-ios-download-outline right-icon"></i></a>
	</div>			
</figure>

CSS

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.klasenu_tnilagem {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 7px 1%;
    min-width: 217px;
    max-width: 309px;
    max-height: 215px;
    width: 100%;
    background: #191818;
    text-align: center;
}



figure.klasenu_tnilagem img {
  max-width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.klasenu_tnilagem > div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
}
figure.klasenu_tnilagem > div a {
  color: #ebebf1;
}
figure.klasenu_tnilagem > div a i {
  font-size: 49px;
  opacity: 0;
  top: 49%;
  position: relative;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  display: inline-block;
}
figure.klasenu_tnilagem > div a i.left-icon {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
figure.klasenu_tnilagem > div a i.right-icon {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
figure.klasenu_tnilagem > div::before {
    position: absolute;
    top: 29px;
    right: 49%;
    bottom: 29px;
    left: 49%;
    border-left: 1px solid rgba(236, 232, 232, 0.8);
    border-right: 1px solid rgba(236, 232, 232, 0.8);
    content: '';
    opacity: 0;
    background-color: #f0f0f5;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
figure.klasenu_tnilagem:hover img {
  opacity: 0.35;
}
figure.klasenu_tnilagem:hover > div i {
  opacity: 0.9;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.klasenu_tnilagem:hover > div i.left-icon {
  -webkit-transform: translate3d(-25%, -50%, 0);
  transform: translate3d(-25%, -50%,...