I would do something like this: http://jsfiddle.net/D7vMG/3/ (do you see the z-indexes? it makes sure the anchor is higher positioned then the paragraph.)

You can of course use only the <a>-tag and not a heading. In that case you can put the position: absolute on the a-tag.</a>

<a>Hope it helps! Good luck!</a>

Hi Noamflint, we develop a lot of e-commerce websites and I want to fill you in how we tackled this problem several months ago and how.

We deleted the anchor of the image! In our code it looks something like:

The New iPad

As you see at the moment there is no anchor on the image, but our clients do want this. because of usabilty. and people just love clicking images.

We solved this with CSS:

div { position: relative; padding-top: 30px; display: block; }

div h3 { position: absolute; top: 0px; left: 0px; display: block; }

div h3 a { width: 200px; height: 230px; display: block; }

div img { width: 200px; height: 200px; display: block; }

This code above is pseudo of course, but i hope you see what we are trying to accomplish. The anchor tag is positioned absolute in the parent div. With the dimensions on it, the link is above the image, so when people hover the image. they automatically hover the link. Clicking in it, takes them to the detail page.

You should try it! Maybe it will help you out.

No problem, glad I could help!

It is pretty much as if the anchor flows over the entire image.

I did this a while back on a dutch telecom website called typhone dot nl. Check it out, it's on the frontpage (the offer blocks all have it)

The H3 is just there as an example. If I just got an H1 above all products, i use h2's, if there is a h2, i use h3's. and so on.

Yeah of course, you can style the link any way you want. Even hide it although I wouldn't recommend that hehe.

I made this jsfiddle for you: http://jsfiddle.net/D7vMG/1/

good luck trying it yourself!