Need HTML/CSS help with my Text/Icons
 

Hi Guys.

I'm trying to figure out how to get the text on my Model pages to lay -over- the image itself. I plan on getting rid of the current name background and just having the name sit over the image towards the bottom, with a translucent black background.

Something like this:
http://www.tittytweaker.com/sample1.jpg

I've been trying to use the firefox "inspect element" feature to mess with the code and work it out but so far haven't had any luck.

Thanks for your time,
~TT

Something like this?

http://stackoverflow.com/questions/8...n-image-in-css

Try this:

Thanks, Flowing.

It appears that it's also affecting my pagination, though, and my drop down menus are now hidden behind the icons when they roll out. Can you explain how to fix those?

You need to play with the z-index to bring elements back/fwd, when something like that happens. The submenu, for example:
The pagination issue: you need to be more specific, if you have other anchors on the same container .modelicon

Change
.modelicon a:first-of-type
to
.modelicon > ul a:first-of-type

Thank you very much for the help. Had a feeling it had something to do with the specificity since I seem to run into similar problems every once in a while.

Thanks again for helping a newbie out :D

~TT

:thumbsup