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

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:

1. Using background color and opacity on the video
2. 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>
  )
}