JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
  <div class="photo"> </div>
<div class="photo"> 
</div>
<div class="photo"> </div>
<div class="photo"> </div>
<div class="photo"> </div>
</div>

<div class="container">
  <div class="photo2"> </div>
<div class="photo2"> 
</div>
<div class="photo2"> </div>
<div class="photo2"> </div>
<div class="photo2"> </div>
</div>

CSS

.container {
  display:flex;
  flex-wrap: wrap;
}
.photo {
  width: 200px;
  height: 100px;
  background-color: red;
  border: 1px solid blue;
}
.photo2 {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid blue;
}
.hover {
  width: 400px;
  heught: 350px;
  background-color: grey;
}
.hover2 {
  width: 500px;
  heught: 400px;
  background-color: blue;
}

JavaScript

$(function (){
$('.photo').click(
  function () {
    $(this).toggleClass("hover2");
  }
);
$('.photo2').hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
); 

});