JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>
<div class="films"></div>
<div class="synopsis"></div>
<div id="page-flip">page-flip</div>

CSS

div {
    width  : 100px;
    height : 100px;
    border : 1px solid #000;
}
.box-change {
    background : red;
}
.films-change {
    background : blue;
}
.synopsis-change {
    background : yellow;
}

JavaScript

var animez = 0;


function addC(){
    $(".box").addClass("box-change");
    $(".films").addClass("films-change");
    $(".synopsis").addClass("synopsis-change"); 
    
    var t = setTimeout("removeC()",8000);
}
 function removeC(){
    $(".box").removeClass("box-change");
    $(".films").removeClass("films-change");
    $(".synopsis").removeClass("synopsis-change"); 
} 


 $(function() {  
    $("#page-flip").hover(
      function () {
         addC();
        },
      function () {
       
       }
    )
});