Press the button obscured by an image

Question

Press the button obscured by an image

Recently on my HTML website, I encountered an issue where I tried adding a transparent image over a button but found that I was unable to click on the button afterwards. The problem seems to be related to the following code snippet:

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}

<div id="container">
  <img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
  <a href="#">
        Click here
    </a>
</div>

Any insights or solutions would be greatly appreciated. Thank you!

javascript jquery html css web

Answer 1

Answer №1

A solution for this issue is to adjust the z-index of the image so that it is lower than the a element (which is typically set to 0 by default)

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

<div id="container">
  <img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
  <a href="#">
    Click here
  </a>
</div>

Another option is to use the image as a background on the container, eliminating the need for absolute positioning or adjusting z-index.

Answer 2

A solution for this issue is to adjust the z-index of the image so that it is lower than the a element (which is typically set to 0 by default)

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

<div id="container">
  <img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
  <a href="#">
    Click here
  </a>
</div>

Another option is to use the image as a background on the container, eliminating the need for absolute positioning or adjusting z-index.

Answer 3

Answer №2

If you want to make the button appear in front, remember to set a z-index value and set its position to relative

.button {
  z-index: 1;
  position: relative;
}

Below is the code snippet you should use:

html

<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
    Click here
</a>

css

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}

.button {
  z-index: 10;
  position: relative;
}

For a live demo, check out the js fiddle here

Answer 4

If you want to make the button appear in front, remember to set a z-index value and set its position to relative

.button {
  z-index: 1;
  position: relative;
}

Below is the code snippet you should use:

html

<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
    Click here
</a>

css

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}

.button {
  z-index: 10;
  position: relative;
}

For a live demo, check out the js fiddle here

Answer 5

Answer №3

You have the flexibility to adjust the width and height of the image-container to your liking.

#container {
  height: 400px;
  width: 400px;
  position: relative;
  }
#image-container{
  width:100%;
  height:100%;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
  background-position:center;
  background-size:contain;
}

<div id="container">
  <div id="image-container">
  <a href="#">
        Click here
    </a>
    </div>
</div>

Answer 6

You have the flexibility to adjust the width and height of the image-container to your liking.

#container {
  height: 400px;
  width: 400px;
  position: relative;
  }
#image-container{
  width:100%;
  height:100%;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
  background-position:center;
  background-size:contain;
}

<div id="container">
  <div id="image-container">
  <a href="#">
        Click here
    </a>
    </div>
</div>

Press the button obscured by an image

Answer №1

Answer №2

Answer №3

Similar questions

creating tables in PHP using HTML code

Ways to determine if content is visible within a div

What is the best way to exclude a field from a Joi schema?

Is it possible to reverse engineer a UI by starting from its current state and debugging backwards?

The latest version is available, but remember to update @react-navigation/bottom-tabs, @react-navigation/stack, and @react-navigation/drawer to at least version 5.10.0

CSS styles are not being applied correctly to the Bootstrap modal in combination with Leaflet

Initiating an AJAX call to send a PHP request from one webpage to another

Missing ghost image appears when you drag and drop the file

JavaScript, keep it easy: globalize

Achieving consistent hover effects in both Firefox and Chrome with CSS

Converting request.body into a string before building a JSON object

aligning a form vertically in a container

Applying CSS dynamically to a mat-cell in Angular 6

Unable to successfully transfer JSON data from JavaScript file to .NET controller using AJAX POST request

Utilizing display: flex for creating table padding

`Display PowerPoint file within your internet browser`

Achieving the extraction of a particular string from an HTML element using JavaScript

Transmitting a multidimensional array in JavaScript to an AjaxPro method on a front-end webpage: A step-by-step guide

Struggle between Angular and fundamental CSS principles

How to eliminate a hyperlink from an HTML element with the help of JQuery