Pop up on hover <area> tag, HTML

I'm mapping some coordinates on an image map and I want to display a pop-up message, containing a description and an image on hover, but I can't figure out how to do it. I tried to contain the area in a div like this:

EDIT. I changed the HTML and CSS like this:

<div class="contain">
    <area target="" alt="Agri-Eco Park Gate" title="Agri-Eco Park Gate" href="" coords="836,449,793,414" shape="rect">
    <div class="content">
        <h2>fasdasd</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, non dolorum.</p>
        <img src="image.jpg" alt="image" onmouseover="popUp()">
    </div>
</div>
        

And style like this:

.contain{        
    margin: 0;
    padding: 0;
    display: flex;
}

.contain .area {       
    position: relative;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #777;
    border-radius: 50%;
    transition: 0.5s;
    cursor: pointer;
}
.contain .area .content{    
    position: relative;
    bottom: 55px;
    width: 400px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    transform: translateX(-50px) translateY(-50px);
}

.contain .area:hover .content{      
    visibility: visible;
    opacity: 1;
    transform: translateX(-50px) translateY();
}

What I want is to display the pop-up like this on the coordinate on this image map. I used this plug in to highlight the areas in the map.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('.map').maphilight();
  });
</script>