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:
- Hole effect without animation: https://codepen.io/Giordanidis/pen/qBpQGVd
* {
margin: 0;
padding: 0;
}
.height-100 {
height: 100%;
}
.width-100 {
width: 100%;
}
.banner-sec {
display: block;
height: 100vh;
width: 100vw;
}
.banner-item {
position: relative;
}
.banner-img {
object-fit: cover;
}
.banner-item-bg {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000000;
opacity: 0.75;
z-index: 1;
}
.banner-item svg {
fill: transparent;
stroke: #f00;
stroke-width: 1px;
position: relative;
width: 280px;
z-index: 10;
transition: all 0.3s ease;
transform-origin: left center;
animation: AnimateBannerGraphic 1s infinite;
}
.banner-item-mask {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: 1;
mask-repeat: no-repeat;
mask-size: 280px;
mask-position: 85% center;
}
@keyframes AnimateBannerGraphic {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}<body>
<header></header>
<main>
<section class="banner-sec">
<div class="banner height-100 width-100">
<div class="banner-item height-100 width-100">
<div class="banner-img-wrapper height-100 width-100">
<img src="https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="banner-img height-100 width-100">
</div>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18.7241C6 12.6409 10.0359 7 15.5625 7C19.3976 7 22.2434 9.53088 24 13.1211C25.7565 9.53111 28.6022 7 32.4375 7C37.9647 7 42 12.6419 42 18.7241C42 31.7444 24 41 24 41C24 41 6 32.3045 6 18.7241Z" fill="#333333" />
</svg>
</div>
</div>
</section>
</main>
<footer></footer>
</body>- Hole effect with animation (but without the "hole"): https://codepen.io/Giordanidis/pen/OJzaYZz
* {
margin: 0;
padding: 0;
}
.height-100 {
height: 100%;
}
.width-100 {
width: 100%;
}
.banner-sec {
display: block;
height: 100vh;
width: 100vw;
}
.banner-item {
position: relative;
}
.banner-img {
object-fit: cover;
}
.banner-item-bg {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000000;
opacity: 0.75;
z-index: 1;
}
.banner-item svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
fill: red;
height: 280px;
width: 280px;
z-index: 10;
animation: AnimateBannerGraphic 2s infinite;
}
.banner-item svg path {
fill: inherit;
}
.banner-item-mask {
position: absolute;
left: 0;
top: 0;
z-index: 1;
mask-repeat: no-repeat;
mask-size: 280px;
mask-position: 85% center;
}
@keyframes AnimateBannerGraphic {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}<body>
<header></header>
<main>
<section class="banner-sec">
<div class="banner height-100 width-100">
<div class="banner-item height-100 width-100">
<div class="banner-img-wrapper height-100 width-100">
<img src="https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="banner-img height-100 width-100">
</div>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18.7241C6 12.6409 10.0359 7 15.5625 7C19.3976 7 22.2434 9.53088 24 13.1211C25.7565 9.53111 28.6022 7 32.4375 7C37.9647 7 42 12.6419 42 18.7241C42 31.7444 24 41 24 41C24 41 6 32.3045 6 18.7241Z" fill="#333333" />
</svg>
</div>
</div>
</section>
</main>
<footer></footer>
</body>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?
Thanks in advance!
I appreciate your help! Thanks in advance!