Rotating divs

HTML

<div id="container">
   <div class="row">
      <div class="col">
         <div class="trigger vertical">
            <div tabindex="0" class="maincontent hover-img">Text Here</div>
         </div>
      </div>
      <div class="col">
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img">
               <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
               <p>Hello!</p>
            </div>
         </div>
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img">
               <img class="img" src="http://i.huffpost.com/gen/964776/thumbs/o-CATS-KILL-BILLIONS-facebook.jpg">
               <p>Hello!</p>
            </div>
         </div>
      </div>
      <!-- </div>
 <div  class="row">-->
      <div class="col">
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img">
               <img src="http://petattack.com/wp-content/uploads/2014/07/little_cute_cat_1920x1080.jpg">
               <p>Hello!</p>
            </div>
         </div>
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img">Text Here</div>
         </div>
      </div>
      <div class="col">
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img"> Text Here</div>
         </div>
         <div class="trigger">
            <div tabindex="0" class="maincontent hover-img"> Text Here</div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="trigger">
         <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
      <div class="trigger">
         <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
      <div class="trigger large">
         <div tabindex="0" class="maincontent hover-img">Text Here</div>
      </div>
   </div>
   <div class="row">
      <div class="trigger">
         <div tabindex="0" class="maincontent...

CSS

.trigger {
   width: 200px;
   height: 200px;
   text-align: center;
}

p {
   display: none;
   -moz-transform: scale(-1, 1);
   -webkit-transform: scale(-1, 1);
   -o-transform: scale(-1, 1);
   -ms-transform: scale(-1, 1);
   transform: scale(-1, 1);
}

img {
   width: 130px;
   margin: 15px;
}

.trigger.large {
   width: 400px;
}

.trigger.vertical {
   height: 400px;
}

.trigger.vertical * {
   height: 400px;
}

.hover-img,
.hover-img.hover_effect {
   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-style: preserve-3d;
   text-align: center;
   font-size: 0;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   border-style: solid;
   border-width: 1px;
   border-color: #CCCCB2;
   border-radius: 5px;
}

.trigger.large .hover-img,
.trigger.large .hover-img.hover_effect {
   width: 400px;
}

.trigger:hover > .hover-img {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotate(360deg);
   font-size: 14px;
   color: #FFF;
   background-image: url("https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx");
}

#container {
   width: 960px;
   margin: 0 auto;
}

.row {
   display: flex;
}

.col {
   display: inline-block;
}

.trigger.large .hover-img,
.trigger.large .hover-img.hover_effect {
   width: 400px;
}

JavaScript

$(document).ready(function() {
   $(".trigger").hover(function() {
      $(this).find('img').fadeOut();
      $(this).find('p').fadeIn();

   });
   $(".trigger").mouseleave(function() {
      $(this).find('img').fadeIn();
      //$(this).text("");

   });
});