How can I use Chakra UI _after Pseudo-Class to create a dark layer in front of my video? (Hero section) - css

Question

I'm trying to create this layer effect in front of a video using Next.js and Chakra UI. Example made in Figma:
Code:
function Hero() {
const videoRef = useRef();
useEffect(() => {
setTimeout(()=>{
videoRef.current.play()
},1000)
}, []);
return (
<Box
display="flex"
alignItems="flex-end"
justifyContent="center"
width="100%"
height="100%"
>
<Box
position="relative"
top="0"
left="0"
zIndex="10"
_after={{bgGradient:"linear(180deg, rgba(6, 0, 11, 0.29) 70.65%, #06000B 100%)"}}
>
<video
ref={videoRef}
loop
autoplay
muted
/* controls */
preload="auto"
>
<source src="/hero.mp4" type="video/mp4"/>
</video>
</Box>
<Button
variant="outline"
color="#f3f3f3"
position="absolute"
zIndex="20"
marginBottom="50px"
bgGradient="linear(91.32deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 98.96%)"
_hover={{
bgGradient:'linear(to-r, rgba(2, 43, 67, 1), rgba(41, 128, 185, 0.64))',
boxShadow:"4px 4px 30px -1px rgba(41, 128, 185, 0.72)",}}
>
CONHEÇA A COMUNIDADE
</Button>
</Box>
)
}
I saw some examples using ::before, but no one using chakra UI and everyone made with an image. Can anyone help me with this, please?

Answer 1

I think you can do this two ways:
Using background color and opacity on the video
The way you were doing, with the before/after, but as absolute with 100% width and height, I'll cover this approach below
function Hero() {
const videoRef = useRef();
useEffect(() => {
setTimeout(()=>{
videoRef.current.play()
},1000)
}, []);
return (
<Box
display="flex"
alignItems="flex-end"
justifyContent="center"
width="100%"
height="100%"
>
<Box
position="relative"
top="0"
left="0"
zIndex="10"
_after={{
bgGradient:"linear(180deg, rgba(6, 0, 11, 0.29) 70.65%, #06000B 100%)",
width: "100%",
height: "100%",
position: "absolute",
content: "",
top: 0,
left: 0
}}
>
<video
ref={videoRef}
loop
autoplay
muted
/* controls */
preload="auto"
>
<source src="/hero.mp4" type="video/mp4"/>
</video>
</Box>
<Button
variant="outline"
color="#f3f3f3"
position="absolute"
zIndex="20"
marginBottom="50px"
bgGradient="linear(91.32deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 98.96%)"
_hover={{
bgGradient:'linear(to-r, rgba(2, 43, 67, 1), rgba(41, 128, 185, 0.64))',
boxShadow:"4px 4px 30px -1px rgba(41, 128, 185, 0.72)",}}
>
CONHEÇA A COMUNIDADE
</Button>
</Box>
)
}