JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="leftPostHolder">
        <div class="leftPost">
            <h3><a href="#">link</a></h3>
        </div>
    </div>
</div>

CSS

.container {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.leftPostHolder {
  background-color: #000;
  position: absolute;
  width: 30%;
  height: 100px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.leftPost {
  width: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  height: 100%;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  display: table;
}
.leftPost:hover {
  transform: scale(1.05);
  -ms-transform: scale(1.05);
  -mos-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform-origin: top center;
  -ms-transform-origin: center;
  -mos-transform-origin: center;
  -webkit-transform-origin: center;
    opacity: 0.5;
}
.leftPost h3 {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.leftPost a{
  color: transparent;
  text-align: center;
  padding:10px;
  display:block;
}
.aHover {
  color: #454545!important;
  transform: rotate(-2deg);
  background-color: #fff;
}

JavaScript

$(".leftPost").hover(function () {
    $(".leftPost a").toggleClass("aHover");
 });