Overgrowth

Working on how I might make it so the user can hover over the plants and make the overgrowth disappear in the weeds quest - I knew I could overlay the weed images, then set .weed:hover {opacity:0} , but then as soon as you unhover it it appears again.

So I looked into how to make a hover permanent - the first thing i found was this jQuery code, which worked, except for the fact that it made every instance of the .weed class add the .weedhover class.

So I looked for more and found this  - which is not javascript, just an html event. This one adds the hover class to just whichever one you hover on, which is much better!

...But then my issue became, what if people don't realise you can hover and move them? so I should make it so as you scroll up they disappear anyway.  I had quite a bit of trouble getting it to work with the scrollmagic. First I tried making it that once you scroll off it makes all the .weed elements go invisible, but then when you scroll back up and it reverses the hover ability doesn't work anymore. If I turn the reverse off, the pinning leaves a massive gap above it. I also had trouble with it not delaying - the 'auto weed removal' happened at the start of the pinning, not at the end. I eventually figured it out by doing two things:

• making the pinning, and the weed removal two separate events, and having the weed removal on a trigger element below the main one,
• and making the main background image the background of the div, and then instead of the weeds disappearing, another copy of the image loads on top of it.

I will have to see how this works with the final art - I think it'll be one of the first things I do.