0 votes
by (8.9k points)
edited by

Hi everybody!  I've come up with a cool effect for my game, Cat Wars, wherein an animated GIF of Obi Wan Catnobi cycles over the text.

<div style = "
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);">
  <img src ="https://s20.pixxxels.org/5i0emjyi5/obiwancatnobi.gif" />
</div>
"Hurry up, Luke!" Behind you, Mr Biggles is still blocking the enemy fighters, but now they have him lined up.

"Wait!" he mews, then Dog Vader opens fire.  Mr Biggles's ship bursts into a million flaming bits and scatters across the surface of the Dog Star.

You're now alone, but you're nearly there.  Your paw hovers over the button of your targeting catputer.

[[Turn it on.]]
[[Use The Force.]]

The trouble is that the GIF can block the underlying links.  This is confusing to some players, especially on different screen sizes.  Is there a way I can allow the players to kind of "click through" the image to get to the link?

1 Answer

+1 vote
by (23.6k points)
selected by
 
Best answer

Add this to the css of the element in question:

pointer-events:none;

Now you should be able to click through the element.

by (8.9k points)

Purr-fect!  Thank you.  smiley

...