I want to add a blue border to my mask and I'm struggling with that for few days. This is the situation:
When you scroll down, a circle appears and gradually gets bigger. Inside this circle, the new section becomes visible. Essentially, it transitions you to the next section. I would like this circle to have a thick blue border.
When you look at the picture, you can see that the user cannot immediately notice the circle that opens when scrolling. Therefore, I would like the transparent window to have a border to make it clearer what is happening.
Here is the code:
HTML
<div class="overlay-container">
<div class="fixed-sections">
<section class="animation-section">
...
</section>
<section class="interactive-section">
<div class="scroll-overlay"></div>
<div class="custom-cursor">
<div class="cursor-line-horizontal"></div>
<div class="cursor-line-vertical"></div>
<div class="cursor-circle"></div>
</div>
<div class="interactive-text">
<h1>I love making <br>things interactive</h1>
</div>
</section>
</div>
</div>
CSS
.overlay-container {
position: relative;
height: 250vh;
}
.fixed-sections {
position: sticky;
top: 0;
height: 100vh;
}
.animation-section {
position: absolute;
top: 0;
left: 0;
height: 125vh;
width: 100%;
z-index: 1;
background: black;
}
.interactive-section {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 20;
background: black;
-webkit-mask-image: radial-gradient(
circle at center,
black 0%, black 30%, transparent 30%);
mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 30%);
-webkit-mask-size: 0% 0%;
mask-size: 0% 0%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
I tried the border property but it's not working. I also tried the Box Shadow and it didn’t help either. Or I did something wrong.