One Image – Many links – CSS, image backgrounds gradients and creativity (cheating)

I have been trying for days to figure out a way for this idea to work. This is CNN’s web site. Very nice site. About as good as you can get. I really like the “More” button that the site uses. so, i reverse engineered it and this is what I came up with,  to the left and a bit down. you can’t really see it from the ss but the more link that is native to the Drupal Block for the Blogs, Forums, etc. is now nested behind the image that i recreated from the cnn site via Gimpshop. You can see the progression and how I got the darn thing where it is. First, to get the gradient background with image inserted into it is a whole other set of issues that i have covered in other posts. I just needed a way to make the More button PNG file function like the text link. So, I simply moved it (the native More link) to where the More button PGN is located via some CSS and then, I set the More link’s (from Drupal) opacity to 1. You can see it in the SS. now, because the custom style that I have used for these specific panels is consistent, (and they all have 5 items for the preview which means their height is the same) this

THERE ARE SOME CAVEATS

AT THE BOTTOM OF THIS POST – and sorry for the messiness. I don’t care too much for WordPress.com.

CSS adjustment works on all the Panels that I have it enabled on. Very nice now that I am at this point but there was quite a bit of work going into it.

• The More button PNG file is not a piece of Drupal content; it is not a node. It is a simp
  le PNG file that has been uploaded to the images dir and referenced in the CSS.
• I do use the Link Module (the logo is a prime example) to add  urls to images but that means that the one image can only have one url. I don’t want to have to upload a separate PNG for each more button then have to keep track of them all. Plus, adding a node to the site and then having to move that around would mess up the consistency with the custom panel style. This way, I have one image that essentially has more than one link. I know, I know, not really; i have cheated. But the upside to using the Native  ore Link is that I don’t have to worry about the target; it’s already in there. I do realize that there may be a better way (I am sure of it) to do this in code with a custom module maybe, but i’m not at that point. and I need to keep moving on the project. and this way does have an elegance in one image
  =
•  multiple links via CSS.