CSS code to make Gif play outside of hover area

Question

I’m creating a simple webpage for Halloween. I have a background JPG of a starry night sky with a moon in the center. Background 500px by 500px. Moon area would be roughly 100px by 100px center on the image. I have a gif I made of a witch that fly’s across the entire night sky of the background on hover (in front of the moon). Works fine.

I just want the hover area (mouse in/mouse out) to be the moon area itself instead of the whole night sky. The witch gif is triggered if you hover only over the moon but still fly across the whole width of the night sky background. Whenever I contain the hover area to just the moon, the gif is only visible in the moon area instead of the whole night sky. Can you have a gif area 500px by 500px but the hover area to trigger it is only 100px by 100px center? I’ve searched the site and didn’t quite find what I was looking for. Any help is appreciated. Thanks!

This is the simple working HTML code below:

.backgrounds {
  height: 500px;
  width: 500px;
  background-image: url('Background_moon.jpg');
}

.backgrounds:hover {
  cursor: pointer;
  background: url('flying_witch.gif'), url('Background_moon.jpg');
}

<div class="backgrounds"></div>

Answer 1

You can create a div for the moon area and another div for the witch inside the .backgrounds element. The witch element must be after the moon area element:

<div class="backgrounds">
    <div class="moon-area"></div>
    <div class="witch"></div>
</div>

First, let's centralize the .moon-area element.
You can centralize it in 2 different ways.

1) Flexbox: using on the parent display: flex, justify-content: center (horizontally) and aling-items: center (vertically), like this:

.backgrounds {
  background-image: url('Background_moon.jpg');
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.moon-area {
  width: 100px;
  height: 100px;
  z-index: 1;
}

2) Auto margin: using position: relative on the parent, and position: absolute on the .moon-area with some positioning (left, right, top, bottom) and margin: auto properties:

.backgrounds {
  background-image: url('Background_moon.jpg');
  height: 500px;
  width: 500px;
  position: relative;
}

.moon-area {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

We have also the .witch CSS:

.witch {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

So, you can apply the hover effect on .moon-area element. We can use the very uself ~ selector to select the next sibling.

.moon-area:hover ~ .witch {
  cursor: pointer;
  background: url('flying_witch.gif'), url('Background_moon.jpg');
}

Also, don't forget to set z-index: 1 to the .moon-area element and position: relative to the .backgrounds element.