I’ve got two images that use an SVG clippath. The images overlap. I’ve got two requirements: A) the images and clippaths must be fluid. B) the images must overlap such that placing your cursor in the “clipped” portion of one image will activate the hover state of the image behind it.
I’ve been able to accomplish both of these, just not at the same time. When I use a div to display the image via background-image I get the correct overlap behavior but not the scalability; and when I use the image tag within the svg (as seen in my pen), I get the fluidity but I lose the overlap behavior.
You can see this behavior in this pen. When I put my cursor within the clipped portion of the front image, the cursor isn’t touching the back image. (I’ve made the opacity of an image change on hover so you know when your cursor is or isn’t touching it):
https://codepen.io/chrishouse/pen/wXyVXo
