Need HTML/CSS help with my Text/Icons

[Tittytweaker]

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:


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

[myleene]

Something like this?

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

[flowing]

Try this:

.modelicon li {
    background: none;
    position: relative;
    height: 244px;
}
.modelicon .spacer {
    display: none;
}
.modelicon a:first-of-type {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    padding: 2px;
    text-align: center;
}

[Tittytweaker]

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?

[flowing]

You need to play with the z-index to bring elements back/fwd, when something like that happens. The submenu, for example:

.navigation ul.menu li ul.sub-menu {
  z-index: 10;
}

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

[Tittytweaker]

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

[flowing]