KPC
Kevin Powell - Community•9mo ago
Pat66

Add a mask image

I want reproduce this effect in html and css
https://www.youtube.com/watch?v=momF_D4odCM the problem is when I had he mask-image I should get this
Olivier Larose
YouTube
Build a Mask Cursor Effect With Nextjs and Framer Motion
A custom cursor with a mask hover effect revealing text underneath. Made with Nextjs and Framer Motion. Insipired by: https://minhpham.design/ Demo / Source code: https://blog.olivierlarose.com/tutorials/mask-cursor-effect 00:00 Intro
00:28 HTML and CSS
1:06 Creating the Mask
2:05 Getting the position of the mouse
3:19 Creating...
No description
5 Replies
Pat66
Pat66OP•9mo ago
What I get is this one
Pat66
Pat66OP•9mo ago
No description
Pat66
Pat66OP•9mo ago
the code css: 
}

body, .mask{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   background-color: rgb(3, 3, 3);
}


.central{
    height: 100vh;
}
p{
font-size:3vw;
}

.mask{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
   background-color: #ec4e39;
 mask-image: url(mask.svg);
  mask-repeat: no-repeat;
  mask-position: 50%;
  mask-size: 140px;
 }
}

body, .mask{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   background-color: rgb(3, 3, 3);
}


.central{
    height: 100vh;
}
p{
font-size:3vw;
}

.mask{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
   background-color: #ec4e39;
 mask-image: url(mask.svg);
  mask-repeat: no-repeat;
  mask-position: 50%;
  mask-size: 140px;
 }
can I have some idea ? please
MarkBoots
MarkBoots•9mo ago
I didn't dive into your code or the video too much , but I would do it this way I used grid to stack the 2 sections on top of eachother (.back, .front) the .front has a mask-image (radial-gradient) with the following variables to control the size and positions 
--mask-radius: 70px;
--mask-pos-x: 50%;
--mask-pos-y: 50%;
--mask-radius: 70px;
--mask-pos-x: 50%;
--mask-pos-y: 50%;
now you only have to update these property values with js
No description
Pat66
Pat66OP•9mo ago
thanks fro your message but with your css who have twist my brain I don t understand the variable of CSS

Did you find this page helpful?