Photoshop Question posted in
The official user guide can be found here.

Image inserted on top of a form but form input are now block – Photoshop

I have an image that I want to show with opacity on top of a form on the html but the form input cannot be click when the image is position on top of the form.
Is there a way to achieve this without loading it as a background or doing a photoshop file to load it has a background. I would prefer to have the image on top of the form writing and not underneath.

I am also loading bootstrap.

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>
Tags:

2

Answers


  1. 0

    There’s not really a way to do this while keeping the image on top. The form needs to be on top in order to be clickable. But we can set it’s transparency just as we can with the image so that it looks faded by the image. I believe this achieves the overall effect that your’re looking for.

    .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"  > 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="https://placehold.it/650x290" alt="orange scorpio image">
    	</figure>
   </form>
    Login or Signup to reply.
  2. 0

    set you 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search