JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="link-boxes">
			<div class="container">
				<div class="row">
						<div class=" col-sm-4"
							data-bottom-top="transform: translateY(100px); opacity: 0;" data--200-bottom="transform: translateY(0); opacity: 1;"
							 >
							<a class="link-box" href="/en/leben-bauen/referenzobjekte/" title="Referenzobjekte" data-double-tab>
								<img src="http://baswa.opten.ch/media/1015/2g67_vaulthouse_p1.jpeg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=360&amp;height=192&amp;maxHeight=2500&amp;maxWidth=2500" title="Referenzobjekte" class="img-responsive" data-slimmage />
								<span class="link-box-icon">
									<span class="tcon tcon-remove"></span>
								</span>
								<div class="link-box-caption">
									<h4 class="link-box-title">Referenzobjekte</h4>
									<p class="link-box-text">BASWAphon Akustiksysteme werden weltweit in vielfältigen und anspruchsvollen Objekten eingesetzt.</p>
								</div>
							</a>
						</div>
						<div class=" col-sm-4"
							data-bottom-top="transform: translateY(100px); opacity: 0;" data--200-bottom="transform: translateY(0); opacity: 1;"
							 >
							<a class="link-box" href="/en/planen/" title="BASWAphon Systeme" data-double-tab>
								<img src="http://baswa.opten.ch/media/1016/baswaphon-classic.jpg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=360&amp;height=192&amp;maxHeight=2500&amp;maxWidth=2500" title="BASWAphon Systeme" class="img-responsive" data-slimmage />
								<span class="link-box-icon">
									<span class="tcon tcon-remove"></span>
								</span>
								<div class="link-box-caption">
									<h4 class="link-box-title">BASWAphon Systeme</h4>
									<p class="link-box-text">Unsere Akustiksysteme vereinen leistungsstarke Schallabsorption mit gestalterischem Freiraum.</p>
								</div>
							</a>
						</div>
						<div class="...

CSS

.link-box {
  margin: 100px 0;
  padding-bottom: 50px;
  position: relative;
  display: block;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .link-box {
    margin-bottom: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
}
.no-touch .link-box:hover,
.link-box.-active {
  text-decoration: none;
}
.no-touch .link-box:hover .tcon-remove::before,
.link-box.-active .tcon-remove::before {
  -moz-transform: rotate(45deg) translateX(-50%);
  -ms-transform: rotate(45deg) translateX(-50%);
  -o-transform: rotate(45deg) translateX(-50%);
  -webkit-transform: rotate(45deg) translateX(-50%);
  transform: rotate(45deg) translateX(-50%);
}
.no-touch .link-box:hover .tcon-remove::after,
.link-box.-active .tcon-remove::after {
  -moz-transform: rotate(45deg) translateY(50%);
  -ms-transform: rotate(45deg) translateY(50%);
  -o-transform: rotate(45deg) translateY(50%);
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}
.link-box:hover .link-box-caption,
.link-box.-active .link-box-caption {
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.link-box-title {
  margin: 0;
  padding: 15px 0 18px;
  text-transform: uppercase;
  font-weight: 300;
  font-family: Flama-Light;
}
.link-box-title span {
  float: right;
}
.link-box-icon {
  position: absolute;
  bottom: 0px;
  line-height: 50px;
  right: 10px;
  z-index: 10;
}
.link-box-caption {
  padding: 0 20px 20px;
  margin-top: -50px;
  position: absolute;
  top: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  color: #666666;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  left: 0;
  right: 0;
}
.link-box-caption p {
  line-height: 1.2;
}