Css image over another image

[techbuilder]

@Stomme_poes

I’m not saying don’t have a hover effect, I’m saying you should think twice about needing to hover over the menu item just to read it.

Since the background of the site is dark, you could have the image darkened by default-- with the text being white or very bright on top.

On :hover and :focus, the background image becomes bright again (so you can see there’s an image), while the text remains white.

I’d always rather be able to read the menu at once, and have it maybe become a bit unreadable when I hover/focus, than the other way around.

Also, this means you won’t need the mystery-meat-menu negative text indent: you can just have plain, white, readable text of the anchor just sit out in the open. Then your images don’t even need any text in them: you just have a dark version of the plain image, and a normal version, and it’ll just be a background image on the anchor.

So, using donboe’s css:

#content {
    ... /*properties for content this could be your<ul> */
}
 
#content li {
    margin: /* Margins Needed*/
    float: left
}
 
#content li a {
    display: block;
    width: 247px;
    min-height: 148px; 
    background-position: 0 0;
    background-repeat: no-repeat;
}
* html #content li a {height: 148px;} /*IE6*/
 
#content li a.precision-maching {
    background-image: url(ExtraPhotos/images/Precision-Maching.jpg);
}
 
#content li a.precision-sheet-metal{
    background-image: url(ExtraPhotos/images/Precision-Sheet-metal.jpg);
}
 
#content li a.gasket-die-cutting{
    width: 245px;
    background-image: url(ExtraPhotos/images/Gasket-die-cutting.jpg);
}
 
#content li a:hover, {
#content li a:focus
    background-position: 0 -148px;
}

Excuse the quick gimping, it’s just to show what I mean.

So then you’ll need to add some styles to your anchors to style the text.

#content li a {
    display: block;
    width: 247px;
    min-height: 148px; 
   [b] color: #fff; /*white*/
    font-weight: bold;/*or set all font stuff... size, family*/
    line-height: 60px; /*example guess*/
    text-align: center;[/b]
    background-position: 0 0;
    background-repeat: no-repeat;
}
* html #content li a {height: 148px;} /*IE6*/

Where the line-height is one way to make two lines of text kind spread evenly, vertically. This means the one who is only one line of text gets
line-height: 148px;
instead, to make it sit in vertical center.

That code doesn’t make it look quite like the screen shot, but either more code could or the line-height trick is good enough.

You can also add a background-color to the hover/focus version, which the background image will cover up: if there is no background image for whatever reason (doesn’t load, images blocked, whatever), there’s still an obvious highlight, showing that it’s a link.

Again, it’s only a suggestion.

That image is supposed to be watermarked and when you go over with the mouse the second image it triggers has brighter text.

My grandpa wants the images to be viewable with just a hint of the text
and when you go over the image it brightens the text with the replacement image.

[Stomme_poes]

My grandpa wants the images to be viewable with just a hint of the text
and when you go over the image it brightens the text with the replacement image.

Well, if it’s his site, it’s his choice. I’m only saying that making text barely readable before the user mouses or focuses on the link is considered a bad practice, usability-wise.

It won’t break anything to do it this (grandpa’s) way. Just a little harder (for users) to use.

[donboe]

@techbuilder

all the coding from here
http://www.youtube.com/watch?v=IKeg1nhe-wE&feature=related

and the idea from this website came from here
http://www.hv-designs.co.uk/2008/12/30/dark-style-web-template/

The tutorial you followed is about converting a PSD file to slices for the use in a HTML document and has nothing to do with CSS. As you must have noticed, when saving this in Photoshop, a html file was saved as well which explains the mess I saw before! I will have a look at the other site you mentioned and see If I can make a basic setup for you to work with.

[techbuilder]

Thanks DonBoe