Making image into a link won't work - html

Question

So I'm having some difficulties making a list of images into working links. This is an example how they are addressed in my HTML:
<img src="img/plnt1_.png">
and then how they are referred to in my CSS:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
now, the problem is, when i put the 'a' in front of my CSS part, my image disappears... but when I do it without an 'a', there is no link.

Answer 1

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

Answer 2

The mistake here is the positioning:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
positions your link outside of your viewport (or at least outside of the parent element which may hide overflowing children), I created a fiddle where you can see that:
http://jsfiddle.net/3ajrw1yg/
So, you need to reconsider what it is that you want to achieve position-wise and change your css accordingly.

Answer 3

You're not giving it height, when you have a position absolute, you must have your sizes defined, try this:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
top: -20%;
width: 50%;
height: 100px;
}
and you should also close your IMG tag if you're not using HTML5...
<a href="plantvb1.html" class="plant1">
<img src="img/plnt1_.png" />
</a>