How to mask card glow to image?
I created this hover effect for the card, and now I want to apply the glow to just the image, so that the image has glow and the card and title dont, how can I do that? I tried using
mask-image but my browser says it's an unknown property
https://codepen.io/Lko3001/pen/VwGyEJr7 Replies
try
-webkit-mask-image instead of mask-image. This is unfortunately a property that has been stuck in CSS3 limbo for the past 10 years.... Getting fixed this year though as past of Interop 2023I tried adding it to the glow, but it just makes it disappear
if I'm understanding what you want to do correctly I think you need to put your
#glow and img in their own container and then mask that container with the image?Yes but by doing so, the glow still affects the card, I only want it to apply to the image, i tried with mask-image but the mask follows the glow, which is not what I want
Opened up dev tools and checked the console. It looks like codepen is blocking the superman png from being used as a mask. If you change the image to some thing like a gradient codepen is fine with it. Must just be a security thing on there end. If you use this on a live site of your own it shouldn't be a problem.
Actually I have the same problem when I use it locally for some reason, if I change the picture it works, but if I then refresh the browser it disappears. Also, the main problem is that the mask follows the gradient and I dont want that
it should stay still in the same position of the image
if you host the
superman_PNG39.png on your own server it should be fine. If you are linking it like you are in the codepen that's what is triggering the cross origin error (CORS).