JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgHover">
        <div class="hover"><a href="#">Safety – If you are driving long distances to spend time with family and friends remember to take and break or swap drivers</a></div>
        <div class="content">        
        <img src="http://dummyimage.com/460x400/000/fff.jpg" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in sem nec quam placerat dapibus. Nam tempus commodo ligula, eget sollicitudin neque dapibus et.</p>
        </div>
    </div>

CSS

.imgHover{
        position: relative;
        width: 460px;
        cursor: pointer;
    }
    
    .imgHover .hover { 
        display: none;
        position:absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0;
    }

JavaScript

$(function() {
            $(".imgHover").hover(
                function() {
                    $(this).children(".content").fadeTo(200, 0.25).end().children(".hover").show();
                },
                function() {
                    $(this).children(".content").fadeTo(200, 1).end().children(".hover").hide();
                });
        });