JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cell1">
    <div class="trigger">
        <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
        </div>
    </div>
    <br><br><br><br>
    <div class="trigger">
        <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
        </div>
    </div>
</div>

CSS

.trigger{
    width:200px;
    height:400px;
    background-color:red;
}
.hover-img {
    background-color:green;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}
.trigger:hover > .hover-img {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
    font-size:14px;
    color:white;
}