I’m trying to add gif by using hover effect for area map object but something is wrong here… could you please help me to solve this.

here is HTML code:

<div class="image-container">
    <img src="main_image.png" usemap="#image-map">
    <map name="image-map">
        <area href="" coords="430,432,315,292" shape="rect">
     </map>
</div>

here is CSS code:

.image-container {
            width: 1500px;
            height: 1500px;
            position: relative;
        }

area:hover {
            position: absolute;
            background-image: url('lil_dream.gif');
            z-index: 1;
        }

What’s the problem here: when I hover the area, nothing happens on the page itself but meanwhile gif appears in sources/network tabs in devtools. I made a monosnap recording, so it’s more clear -> https://take.ms/oDDkIx

Do you have some ideas what it could be?.. Thanks a lot in advance!

>Solution :

you can’t use the ‘position’ with the area element, try with ‘wrap’ inside a div, and modify the CSS adding an ‘area-wrapper’ and an ‘area-wrapper:hover’ like this:

.image-container {
    width: 1500px;
    height: 1500px;
    position: relative;
}

.area-wrapper {
    position: absolute;
    top: 292px;
    left: 315px;
    width: 115px;
    height: 140px;
}

.area-wrapper:hover {
    background-image: url('lil_dream.gif');
    z-index: 1;
}

<div class="image-container">
    <img src="main_image.png" usemap="#image-map">
    <map name="image-map">
        <div class="area-wrapper">
            <area href="" coords="430,432,315,292" shape="rect">
        </div>
     </map>
</div>