0
<iframe src="http://osu.ppy.sh/u/516595" style= width:100%;height:100% frameborder="0">

</iframe>
<style type="text/css">
body {
background-color: #d8da3d 
.iframe {position: relative;}
.iframe:<iframe> {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;}
</style> 

<div style="position:absolute;top:020px;left:000px;z-index:10;" >
    <img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;">
    <img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>

That's my code all in one. What I want is that I can click through the "Nieve.gif" I don't know what is wrong and what I could or must do to make possible click trough the gif. And can be possible to make all the site cover of snow gif or better with rain gif? How Can I "erase" that White parts that appear? :( The site it's not mine that's why I use iframe Please people help me :( I don't speak english

user3332058
  • 1
  • 1

1 Answers1

1

Try This.Add pointer-events:none; style to your div. Tested on chrome. 

<div style="position:absolute;top:020px;left:000px;z-index:10;pointer-events:none" >
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;pointer-events:none">
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>

Check out this answer to on this post:

https://stackoverflow.com/a/4839672/589909

It seems to do what I understand what you want to achieve using a pure cross browser CSS approach.

pointer-events:none;

I copy the anser from Jquery pass click through element

Community
  • 1
  • 1
clijiac
  • 117
  • 3