JSFiddle - React, Tailwind, and code Playground

HTML

<div id="splash" class="section section-splash bg">
        <div class="pods">
            	<div class="col col-4">
                	<div id="pod-splash-food" class="pod pod-food">
        				<div class="pod-overlay"></div>
                    </div>
             	</div>
              </div>
        </div>

CSS

.pod {width: 250px; height: 250px; background-color: blue; float: left;}
.pod-overlay {display: none;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	background-color: rgba(255,255,255,.9)}
.pod-overlay.show {display: block;}

JavaScript

$(document).ready(function() {
  $(".pods .col").on("mouseenter", function() {
            $(this).find(".pod-overlay").addClass("show")
        });
        $(".pods .col").on("mouseleave", function() {
            $(this).find(".pod-overlay").removeClass("show")
        });
	});