Pop up on hover <area> tag, HTML

Question

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>

Answer 1

Inside of your <img> tag, add an onmouseover event. Then we can create a function inside of a <script> tag (preferable in your head element) that displays the alert. The code should look something like this.

<!-- HTML -->
<img src="image.jpg" alt="image" onmouseover="popUp()">

// JavaScript
function popUp() {
alert("put whatever text here");
}

alert() can be very intrusive if used frequently and can only contain text. If you want an image to display, you will have to put some more work in. Check out this resource for Modal images: https://www.w3schools.com/howto/howto_css_modal_images.asp
And for more about alert() and onmouseover: https://www.w3schools.com/jsref/event_onmouseover.asp https://www.w3schools.com/jsref/met_win_alert.asp