How does one control the effect when hovering over a product image?

When overing over the product image on the homepage, the effect covers the entire image.

when hovering over the product image on a category page, the effect covers the just the bottom part.

is this controllable? can the color of the effect be changed?

Hello chrisod.

You can explore the different variants of Element theme's layouts here:

https://earth1.nop-templates.com/themedemo/preview

There are 4 demos and they show all the different layout combinations.
You can only have what is shown on each of these 4 demos, there is no option to have anything different.
Also, there is a color switcher there (the "gear" icon at the left of the screen), which you can use to check what colors are allowed to be changed.