using gif as a hover effect to an area object

February 28, 2023

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>