How to show half transparent div in react?

Question

I'm currently working in a react project. There is item details page is displayed when clicking on any item on mail page (same as product and product detail page).

In that detail page i want hide the part of form when user is not authenticated and show a login button.

Recently i came across, medium pair articles will hide the content if member is not belong to subscription plan.

The same i want implement in my project. i can hide content based isAUTH.

function pageDetail({ auth }){
  return (
      <Actual content >
      { auth && 
       <Form />
      }
      <Login-ui >
   )
}

Here i need to hide from 50 % from bottom and show the login ui with opacity on top (same as image above).

Any suggestions would greatly appreciated. Thanks

Answer 1

you can create a login component with the same height of the visible page, and putting in that component a linear gradient background:

background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); 

you should then block the scrolling for the article behind it, in order to not show the full text to users.