What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma:

https://i.sstatic.net/aqIHk.png

Here is the code snippet:

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 have seen other examples using ::before, but none specifically with Chakra UI and all made with images. Can anyone assist me with this, please?

cssreactjsnext.jshtml5-videochakra-ui

Answer №1

I believe there are two possible approaches to achieve this:

  1. Utilizing background color and opacity settings on the video element
  2. Continuing with your method of using before/after pseudo-elements, but positioning them absolutely with 100% width and height - I will elaborate on this below
function MainVideo() {
  const videoElement = useRef();

  useEffect(() => {
    setTimeout(()=>{
      videoElement.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={videoElement}
          loop 
          autoplay
          muted 
          /* controls */
          preload="auto"
        >
          <source src="/main-video.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)"}};
      >
        DISCOVER THE COMMUNITY
      </Button>
    </Box>
  )
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for opening and populating dialogs from dynamically mapped cards?

I have a unique array of JSON data that is connected to Material-UI (MUI) cards. Each card features a button that triggers a dialog to open. When clicking the button on a card, I aim to pass the specific value of GroupName into the dialog. In my case, ther ...

javascriptreactjsjsonmaterial-ui

Error in parsing: Unexpected token encountered. Expected a comma instead. Issue found in React with Typescript

I'm encountering a new error message that I haven't seen before... I've checked my code thoroughly and it seems to be correct, yet the error persists. Here is my code snippet: interface AuthState { token: string; user: User; } interfac ...

reactjstypescript

Exploring the differences between req.params and req.query when working with Next.js dynamic API routes

I am perplexed by the difference in accessing params in my Next.js API routes compared to traditional express routes. In order to access a specific dynamic route ID, I find myself using req.query instead of the usual params. Is this the preferred method fo ...

javascriptnode.jsexpressnext.js

Ensure the menu bar remains at the top of the page without using the position:

Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up. Her ...

htmlcss

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...

htmlreactjsmapboxdeck.gl

When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: .hslide-item {width: 100%}; The script started ignoring the entire div width. I am looking for a solution where the .hslide-item ca ...

javascriptjquerycss

Encountering an issue with React Native where initializing a project with npx leads to a "

Running the command: npx react-native init MyApp An error occurred while downloading and copying the template. Error message: Cannot find module 'C:\Users\%%%%\AppData\Local\Temp\rncli-init-template-rVvcjE\node_ ...

javascriptnode.jsreactjsreact-nativenpx

`Align nth-child elements in the center based on varying display sizes`

How do I center the nth-child elements here? Currently, it aligns my divs in a row, which is what I want, but how can I center the elements in the middle of my page based on browser width? Right now, if I center the elements by changing left: px; it only w ...

htmlcss

Transitioning background color on hover using HTML and CSS styling techniques

My goal is to change the background color of an element when the cursor hovers over it. Oddly enough, the transition is successful for altering the font size but not for the background color. Here is my CSS code: .ul01 a,p{ height: 100%; display: ...

htmlcss

Utilize CSS to prioritize the image and ensure it is responsive

I'm utilizing the 'featurette' feature in bootstrap. Currently, the page displays text on the left and an image on the right. As you reduce the browser size, they stack on top of each other, with the text appearing above the image. How can I ...

cssimageresponsive

Which is better in React class component: declaring a value inside the render function or outside of it

In my React Native app, I am utilizing React Navigation and incorporating the useNavigation hook. When working with functional components, you would typically import the hook and assign its output to a variable like this: import { useNavigation } from &apo ...

reactjsreact-nativereact-navigation

Personalized Bootstrap 4.1 Toggle Animation

I have been attempting to implement a customized menu toggle on Bootstrap 4.0's Navbar menu, using the code provided by Codeply HERE. My goal is to apply the X toggle style to my website's bootstrap navbar. Below is the current setup I have imple ...

htmlcsstwitter-bootstrapbootstrap-4

React-big-calendar: Customize day view to end at 1 am for multiple days

I'm currently in the process of developing a booking system and utilizing react-big-calendar for this project. Situation: A business operates from 9am to 2am the next day, allowing clients to book appointments between 11pm and 1am. Objective: To sho ...

javascriptreactjsreact-big-calendar

What is the best way to format 100K to appear as 100,000?

function formatNumberWithCommas(num) { return num >= 1000 ? `${Number.parseFloat((num).toFixed(3))}` : num; } ...

javascriptreactjs

Angular component: Placing icons on the right side of a mat-chip element

My mat-chip contains content and a cancel icon, but I am having trouble getting the cancel icon to float to the right consistently. Despite setting a fixed width for the mat-chip, the cancel icon is not aligning properly no matter what CSS techniques I t ...

cssangularangular-materialangular-material-5

Exploring the world of form state management using react-hook-form and zod within the shadcn/ui ecosystem

Presently, I am immersed in a project where I am utilizing shadcn/ui. Within the shadcn.ui form setup, they have integrated react-hook-form for managing the forms and zod for validation. My Inquiry Within React Hook Form, the state of an input field is co ...

next.jsreact-hook-form

Navigating using passing data in ReactJs

The following data contains information about people: const people = [ { img: 11, name: "Ahmed", job: "developer", }, { img: 13, name: "Kazim", job: "Engineer", }, ...

javascriptreactjsreact-props

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

javascriptjquerycsshtml-tableautoscroll

What is the reason why calling setState does not update the local state?

Hello everyone, I came across an intriguing React task and I'm struggling a bit with finding the solution. Task: Can you figure out why this code isn't working and fix it? Code: class BugFixer extends React.Component { constructor(props) { ...

javascriptreactjs

Shut down React Modal

I'm facing issues in implementing a close button for my modal. The constructor/props method is not working as expected and I am unsure about the onClick attribute that needs to be added to the button element. class Modal extends React.Component { ...

reactjsreact-dom