Side by Side Mouseover Events

Hi Guys!

I am fairly familiar with HTML, but extremely naive to all other…learning though!
Here is the test page that I am working with:

https://suburbanlg.com/wordpress/?page_id=1732

The first image is the mouseover event that works great….what I want is to nest three events side by side with no space in between (like the images below the mouseover event)

I fully realize there is probably a very easy answer to this, but I am not able to get this to work.

Mouseover for one event works great, but when I try to nest two or three together (see images below working example in link above), I can’t find the right combination. My goal is to have the grass in the images be continuous without having to map.

For one mouseover event:

[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Thanks so much for your help!!