Kevin Powell - Community•7mo ago

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...

5 Replies

Pat66OP•7mo ago

What I get is this one

Pat66OP•7mo 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•7mo 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

Pat66OP•7mo ago

thanks fro your message but with your css who have twist my brain I don t understand the variable of CSS

Gaming

Programming

Add a mask image