I have an image with an overlay background color which has some opacity, and I want to create a "hole" effect on this image.
I want the "hole" to be a specific SVG image that I have, and I want this image to rotate.
I have created 2 examples in Codepen to help you understand what I want:
1) Hole effect without animation: https://codepen.io/Giordanidis/pen/qBpQGVd
2) Hole effect with animation (but without the "hole"): https://codepen.io/Giordanidis/pen/OJzaYZz
In the 1st example, you can see the background image, the background (black) color which has a 75% opacity, and also the SVG image (the heart icon) which acts like a "hole" and you can actually see "behind" the black color. What is missing here is the animation part that you can see in the 2nd example.
In the 2nd example, you can also see the background image and the background color, and also the SVG image, without the "hole" effect, but with the animation (rotation) I want.
My problem is that I cannot combine these two. As already mentioned I just want to somehow add the rotating animation (which you can see in the 2nd example) to the 1st example.
Is there any way I can do it with CSS or JS?
I appreciate your help! Thanks in advance!
Top comments (5)
I'm not sure that I see the "hole" effect that you mean in example 1. I don't see the heart at all in the result of that one. I do see the rotating heart in the 2nd example. What exactly do you want the final thing to look like?
I updated the 1st pen, it didn't work in Chrome because of "-webkit" prefix (I only checked Firefox at first)...
So, I want the final thing to look like the 1st pen, but I want the heart/hole to rotate like it does in the 2nd pen. I hope it's clear now. :)
Attached a screenshot of how the "hole" looks like now (dev-to-uploads.s3.amazonaws.com/up...).
Thanks!
Cool effect you are going for. Not sure if you can animate the mask-image property. You might need to animate a div with the mask-image set. Or, have you tried animating the heart within the svg itself and then using the animated svg as the mask-image?
I really can find any svg on example 1.
Maybe you should recheck to confirm it.
I will be willing to help.
Thanks for you reply!
This is example 1: codepen.io/Giordanidis/pen/qBpQGVd
Check the CSS rules for .banner-item-mask, the SVG shows up because of the following: mask-image: url(healthicons.org/icons/svg/filled/s...);