How can I make links on top of background images clickable?

Question

Forgive me if this has been asked before, I have tried some solutions that have been suggested and none has worked for me just yet.

I have a background image and I want to add links in a div, the links are currently unclickable and I don't know where I am going wrong.

Here's my code so far:

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>
          </Modal.Body>
        </Modal.Dialog>

       <div className='trial text-center'>
        <a href="https://google.com">test</a>
       </div>
      </div>
      );
};

export default NewGreeting;

And here is my css code:

.full-page {
  background-image: url("./hello.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }

.trial{
  display: block;
  color: #474747;
  font-size: 2.1em;
  margin-top: 50vh;
}

Answer 1

Try this:

.trial{
  display: block;
  color: #474747;
  font-size: 2.1em;
  margin-top: 50vh;
  z-index: 999;
}

z-index will help you.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

(Converting my comment to an answer:)

The problem is the <Modal.Dialog> element has special behaviour that makes it "take over" the page and make the rest of the page non-interactive - and your <div> with links in it is located outside that <Modal> dialog, so just move your links into the <Modal.Body> and they'll be made interactive again.

Like so:

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>

           <div className='trial text-center'>
             <a href="https://google.com">test</a>
           </div>

          </Modal.Body>
        </Modal.Dialog>
      </div>
      );
};

export default NewGreeting;