The form fields are now blocked due to an image being inserted at the top

I'm trying to display an image with opacity on top of a form in HTML, but the issue is that the form input becomes unclickable when the image is positioned over it. Is there a way to achieve this without setting the image as a background or creating a Photoshop file to use as a background? I prefer to have the image displayed on top of the form content rather than underneath.

Additionally, I am utilizing Bootstrap in my project.

CSS: 

.scorpion {
  width: 550px;
  opacity: 0.3;
  z-index: 0;
  position: absolute;
  right: 480px;
  bottom: 250px;
}

   
   

<form name="Questions-me" method="post" id="Questions-me" action="">
  <legend>About Me</legend>
  <label>1- What is my favorite color?
    <br>
    <input type="color" name="color" id="color">
  </label>
  <label>2- What is my favorite shape?
    <br>
    <div class="row">
      <div class="checkOption">
        <input type="radio" name="shape" id="shape-heart"> Heart
        <br>
        <input type="radio" name="shape" id="shape-pentagone"> Pentagone
        <br>
        <input type="radio" name="shape" id="shape-square"> Square
        <br>
        <input type="radio" name="shape" id="shape-triangle"> Triangle
        <br>
        <input type="radio" name="shape" id="shape-rectangle"> Rectangle
        <br>
        <input type="radio" name="shape" id="shape-circle"> Circle
        <br>
        <input type="radio" name="shape" id="shape-star"> Star
        <br>
        <input type="radio" name="shape" id="shape-cross"> Cross
        <br>
      </div>
    </div>

    <figure>
      <img class="scorpion" src="img/orangeScorpion.png" alt="orange scorpio image">
    </figure>
</form>

htmlcss

Answer №1

In order to maintain the image on top, it is not possible to have the form overlaying it while still being clickable. However, by adjusting the transparency of the form to match that of the image, we can achieve a faded effect that fulfills your desired look.

.scorpion {
width:550px;
z-index:-1;
position:absolute;
left: 0;
bottom:0;

}

 form {
   opacity: 0.6;
 }  
   

              <form name="Questions-me" method="post" id="Questions-me" action="">
                
                <legend>About Me</legend>
                <label>1- What is my favorite color?<br><input type="color" name="color" id="color" ></label>
                <label>2- What is my favorite shape?<br>
                <div class="row">
                <div class="checkOption">
                        <input  type="radio" name="shape" id="shape-heart" > Heart<br>
                        <input  type="radio" name="shape" id="shape-pentagone"  > Pentagon<br>
                        <input  type="radio" name="shape" id="shape-square" > Square<br>
                        <input  type="radio" name="shape" id="shape-triangle" > Triangle<br>      
                        <input  type="radio" name="shape" id="shape-rectangle" > Rectangle<br>
                        <input  type="radio" name="shape" id="shape-circle" > Circle<br>
                        <input type="radio" name="shape" id="shape-star" > Star<br>
                        <input  type="radio" name="shape" id="shape-cross" > Cross<br>

                    </div>
                    </div>
               
    <figure>
    <img class="scorpion" src="https://placehold.it/650x290" alt="orange scorpio image">
    </figure>
   </form>

Answer №2

adjust the z-index property to -1

.scorpion {
  width:550px;
  opacity:0.3;
  z-index:-1;
  position:absolute;
  right: 480px;
  bottom:250px;
  
}
 <form name="Questions-me" method="post" id="Questions-me" action="">
                
                <legend>About Me</legend>
                <label>1- What is my favorite color?<br><input type="color" name="color" id="color" ></label>
                <label>2- What is my favorite shape?<br>
                  <div class="row">
                  <div class="checkOption">
                        <input  type="radio" name="shape" id="shape-heart" > Heart<br>
                        <input  type="radio" name="shape" id="shape-pentagone"  > Pentagone<br>
                        <input  type="radio" name="shape" id="shape-square" > Square<br>
                        <input  type="radio" name="shape" id="shape-triangle" > Triangle<br>      
                        <input  type="radio" name="shape" id="shape-rectangle" > Rectangle<br>
                        <input  type="radio" name="shape" id="shape-circle" > Circle<br>
                        <input type="radio" name="shape" id="shape-star" > Star<br>
                        <input  type="radio" name="shape" id="shape-cross" > Cross<br>
                    </div>
                    </div>
               
    <figure>
        <img class="scorpion" src="magic-of-blue-universe-images.jpg" alt="orange scorpio image">
      </figure>
   </form>

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 alternative can be used instead of Document in Javascript when working with EJS?

Currently, I am utilizing ejs to handle my HTML tasks and I have come across an issue where I cannot use the usual document.getElementById('id') method within this environment. The error message displayed states "document not defined". This has ...

javascripthtmlnode.jsejs

Ways to stop a div element from shrinking vertically completely

I am struggling with keeping a div on my website at viewport height until the children elements start colliding. I've experimented with min-height and display:table; but haven't found a solution yet. Here is how it's supposed to look: https: ...

htmlcssresponsive-design

Please ensure that you only submit an ajax form once

One issue I'm facing with my form is that sometimes when a user sends it, the submission occurs multiple times - 2, 3, 4 times or even more, instead of just once. Even after setting the button to disabled, the problem persists and multiple submission ...

javascriptjquerycssajaxforms

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

phphtmlclient-serversql-update

What is the best way to ensure my output displays "Type" instead of "Types" when the show_count in WordPress is less than

Currently, I am utilizing wp_list_categories to generate a list and show_count is set to true to display the number of posts in each category. I have successfully implemented this code in my functions.php, removed the parentheses around the post counts, s ...

phphtmlcsswordpresswp-list-categories

Is there a way to incorporate a background image fadeIn effect for ul using CSS3?

I have a list on my webpage where each item is displayed with a CSS3 rotate animation. After the animation finishes, I want to set a background image with a FadeIn effect. To achieve this, I created a "addbg" class for the ul element like so: ul.addbg{ ...

javascriptjqueryhtmlcss

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Can object methods be called using inline event attributes in an HTML tag?

Exploring the depths of core JavaScript has been my latest obsession. It's fascinating how we can easily trigger functions within the global context using events like this. HTML <span class="name" onclick="clicked()">Name</span> JavaSc ...

javascriptjqueryhtml

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from

Hey there, I'm a beginner in learning React and I'm encountering an issue with my popup modal component. Even after showing the modal, I can still interact with and click on the main UI elements. Can anyone assist me with this problem? https://i ...

cssreactjsstyled-components

Dealing with Overflow Issues in Divs

Currently facing an overflow dilemma. My layout is designed to have a white container with rounded corners, while the footer inside the container is a shade of grey. To ensure the rounded corners of the footer div align with the container, I utilized &apo ...

csswordpresshtmltwitter-bootstrap

Launching a new tab for a link within a PHP echo output

I am fairly new to PHP and currently using it to generate a table filled with records from a Database. One of the columns in the table is a hyperlink. Is there a straightforward method to have the link open in a new browser tab when clicked? The relevant c ...

phphtml

PHP loading incorrect CSS file

I have a question about how I am linking a CSS file in my PHP program: <html> <head> <title>Untitled Document</title> <link href='sa_mal_link_1.css' rel='stylesheet' type='text/css'> </head> ...

phphtmlcss

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...

javascriptjqueryhtmlhandsontable

Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example: <html> <head> <style shim-shadowdom> .mylink /deep/ {col ...

htmlcsspolymer

Messages are not showing up inside the repeater

I developed a custom directive that displays blank input fields to be filled with project names in an array of objects. Each object has multiple properties, but for now, I am focusing on the project name property only. <div ng-repeat="projectStatus in ...

javascripthtmlangularjsng-messages

Using jQuery to populate tables

Here is a table I am working with: <table class="table table-hover"> <thead> <tr> <th>Person</th> <th>Ethereum Address</th> ...

jqueryhtml

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

I attempted to replicate the math used for the previous image cuts and added my own image, but it appears blank. Can you identify where the issue lies? #paymentForm { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webk ...

htmlcss

Tips for seamlessly placing a div with a background image within a parent container, all while preventing any scrolling issues as the child div rotates

I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent contain ...

htmlcss

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

When floating a h4 and 2 divs to the left, and another div to the right, how can I place a block inside the remaining space that perfectly fills it? The background color of this space should not spread outside. [h4][div][div][remaining space][div] Thank ...

htmlcsscss-float

Leveraging JavaScript to generate a downloadable PDF document from the existing webpage

My goal is to have the user click a button labeled 'View PDF' or 'Download PDF' on the current webpage. This button would then execute JavaScript code to generate a PDF based on how the current page appears. I attempted using jspdf for ...

javascripthtmldom