Converting an image to a link is not effective

Question

Converting an image to a link is not effective

Currently facing a challenge trying to turn a list of images into clickable links. Here's how I have set them up in my HTML code:

<a href="plantvb1.html" class="plant1"><img src="img/plnt1_.png"></a>

and this is how they are styled in my CSS file:

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

The issue I'm encountering is that when I include the 'a' in my CSS selector, the image disappears... but without it, there is no functioning link.

html css hyperlink

Answer 1

Answer №1

Give this a shot

.vegetation {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

<a href="vegetation.html" ><img src="img/vegetation.png" class="vegetation"></a>

Answer 2

Give this a shot

.vegetation {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

<a href="vegetation.html" ><img src="img/vegetation.png" class="vegetation"></a>

Answer 3

Answer №2

The issue lies in the placement:

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

This code positions your link outside of the visible area (or possibly outside of its container which could hide overflowing content). You can visualize this behavior by checking out my fiddle demonstration: http://jsfiddle.net/9kh32fy4/

To resolve this issue, you should reassess your desired positioning outcome and adjust your CSS accordingly.

Answer 4

The issue lies in the placement:

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

This code positions your link outside of the visible area (or possibly outside of its container which could hide overflowing content). You can visualize this behavior by checking out my fiddle demonstration: http://jsfiddle.net/9kh32fy4/

To resolve this issue, you should reassess your desired positioning outcome and adjust your CSS accordingly.

Answer 5

Answer №3

When using position absolute, it is important to define the height of the element. Here is a suggestion:

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    top: -20%;
    width: 50%;
    height: 100px;
}

Also, make sure to close your IMG tag if you are not using HTML5...

<a href="plantvb1.html" class="plant1">
    <img src="img/plnt1_.png" />
</a>

Answer 6

When using position absolute, it is important to define the height of the element. Here is a suggestion:

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    top: -20%;
    width: 50%;
    height: 100px;
}

Also, make sure to close your IMG tag if you are not using HTML5...

<a href="plantvb1.html" class="plant1">
    <img src="img/plnt1_.png" />
</a>

Converting an image to a link is not effective

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for implementing custom CSS styles in Cognos?

Adjust the position of an image to move it closer to the top using CSS

Building a GWT webpage from scratch: A step-by-step guide

How can I retrieve a PDF from a URL provided by the server using AngularJS?

Steps for Enabling or Disabling a Bootstrap-Select Dropdown based on Radio Button Selection using JavaScript and jQuery

Issue with the execution of Javascript code. Edit required

Implement a maximum height restriction on the children of the Select component in Material-UI

Retrieve the data attribute from a select box that was created dynamically

Drop and drag the spotlight

What is the best way to distinguish automatically generated links using JavaScript?

When the div tag exceeds its boundaries, apply a new class

Passing the initial value from a PHP array to Ajax using an HTML element

What could be the reason for the hover attribute not functioning properly in NextJS

Animation in Three.JS not visible in Chrome version 61 on Mac OS X Sierra

What is the best way to extract numbers from a string using JavaScript?

Can <option> tags be arranged side by side using CSS?

Grails Error: Cannot find method signature for org.apache.catalina.core.ApplicationHttpRequest.getFile()

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

What is the best way to prevent <hr> from covering a <div> in CSS?

Learn how to implement Bootstrap 4's select styling to customize dropdown links, such as using it for a tags