Text Over Image On Rollover

**TehLibrarian** · 03-21-2007 03:30 PM

This is a subject I've tried for the longest time to find some information on but nothing seems to have come up which makes me think perhaps I'm doing something thats not feesable. I'm trying to, using CSS only, to make HTML text show up overtop of an image when it rolls over only. (The text that shows up are links to other pages.) I haven't found any techniques to do this with so I've managed to slightly modify Eric Meyers pure css popups technique and have managed to get it so that when you do mouse over the text appears but for some reason it keeps picking up the background image so whenever you go to click on the text link the entire image pops up behind it as well. Does anyone have any ideas on how this might be fixed? Thanks in advance.

Here is the page I'm working on http://www.osceolalibrary.org/test/purplepage.html

The Code

#account {
position: relative;
top: -29px;
left: 0;
width: 91px;
height: 200px;
float: left;
font: 10px Helvetica, Arial, sans-serif;
}

#account a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background-image: url(/images/Account2.jpg); height:190px;
repeat:no-repeat; }

#account a:hover {color: #411; background-image: url(/images/Account-over.jpg);
}

#account a span {display: none;}

#account a:hover span {
display: block;
position: relative; top: 81px; left: 0; width: 91px;
padding: 5px; margin: -29px;
color: #fff; background: url (/images/Account-over.jpg); height:200px repeat: no-repeat;
font: 10px Helvetica, Arial, sans-serif; text-align: center;}

ul.account2 {list-style-type: none;
margin-top: -14px;
text-align: center;
background-image: transparent;
font: 12px Helvetica, Arial, san-serif;
}

ul.account2 a {
list-style-type: none;
background-image: none;
background-color: transparent;
}

ul.account2 a:hover {
list-style-type: none;
background-image: none;
background-color: transparent;
}

ul.account2 a:visited {
list-style-type: none;
background-image: none;
background-color: transparent;
}

**WebJoel** · 03-21-2007 05:51 PM

I recognize what you're doing here. I'll copy our code to offline, will have to make all your referances 'absolute path' to work that way, -suspect that there are some widths/heights not properly stated for the <li> in it's hover-state.
Will try to have this back to you tomorrow (Thurs).

-I am already seeing little quirkies, like this:

.newscontent {color: #000000
float: left;
display: inline;
width: 400px;
margin: 15px 0 7px;
padding-top: 2em;
}

(missing " ; " after #000000)

and this:

#newsheader {background-image: url(http://www.osceolalibrary.org/images/newsgradient.jpg);
background-repeat: no-repeat; color: #fff;width: 680;
height: 35px;
margin-left: 17px;
margin-top: 0;
}

-Is that cm, em, px, pt, mi, km??

-I'm going to assume "px".

**WebJoel** · 03-22-2007 07:50 AM

Did a quick review of this, -starting to figure things out.

Are you after THREE roll-over links here? I see six images dedicated to that, in three seperate <ul>s. You can do it that way, -but you bloat the code and make it more difficult to create/edit. That is SIX http-requests right there for six different images, -halfway to getting 'warnings' for over-using images per page (when optimizing for downloading speed that is, -not any validation issue with 6 or one hundred sixty-six images, -it's just download-time issue).

Assuming I am that you want the order to be:

My Account Catalog Events

and that you want the brighter image for the 'at rest' state, and the darker, shaded image for the "hover state, -is this correct? Assuming this, -I merged the six images into ONE image. With your approval of this order ("My Account", "Catalog" and "Events") and the hover-state order ("bright image" at rest, and "shady image" on-hover), I can procede. Orif you want the 'shady' to be the normal state, and the 'bright' to be the 'hover state', -let me know. It's just a quick 15-second fix to the image, and I can move ahead with this.

I would condense those three <ul>s into just one, and using the merged image osceola-Lib.jpg (image attached: see Screenshot), spaced to reveal the specious 'bright' portionwhen you first view the page, use that for the "background-image" of each <li> and adjust the pseudo-class hovering to reveal 'just the shady'.

I also noted that the image "Header" is like what, -47.-something KB? That is over 4X larger than a typical web page needs to be to assure a 'under 10-second download @ 56-K'. With your approval I would slice that up a bit and use a 'background-color' instead. About 75% of that image is 'just color', -in image format. -Quite possibly I can shave-off 30 or 35-Kb off the image (and thus, the page as well).

-Awaiting feedback.

**TehLibrarian** · 03-22-2007 08:10 AM

Thank you for the help. ^^ I know my code is a bit fat, I'm still learning and I'm still trying to find ways to make things work smoother.

It's only supposed to be two images. I tried the Pixy style for preloading but was unable to manage to make that work at all so I went with the old style two image rollover. Its supposed to be brighter at a, darker at hover, and lighter at visited. And yes you got all of the order right on the images. There are more of them, eight in all, but I was just making sure I could get them to work properly before adding them all. The only problem I might see, which could be me being confused, in the merging of the images. What we were going for was that each one would change to dark seperately depending on which the mouse went over. I'm not sure if that changes things or not.

And I would like a faster load time for the Header.jpg if its at all possible to do so.

Sorry for taking so long to reply and thanks again for all the help.

**WebJoel** · 03-22-2007 10:38 AM

If you have eight images, -can I see them all? It would be easiest to just have them all and combined into one large 'background-image', as lying this out is fairly complex but once it's done, it is easy to get the roll-overs lined up if one had all of them. The beauty of this is that, once the single 'backgorund-image' is loaded, it is loaded into cache and the 'roll-over event' is nearly instantaneous.

Basically (unless I misunderstand the intention) is that we are going to be using positioning attached to the pseudo-class :hover. There will be some width/height adjustments to the <li> along with the 'positioning' to only reveal the 'bright' portion pertainent to the link ("My Accounts", "Events" and "Contact"').
I've done this thing maybe a half-dozen time or so, so it's fairly straight forward.

-What is this "Events Calendar" text that I see? Is this something required? I note that it changes from bright (not quite white) to something closer to black... almost invisible (maybe that was the intention?).

**TehLibrarian** · 03-22-2007 01:02 PM

**WebJoel** · 03-22-2007 01:55 PM

Excellent!

I did this up during lunch break and got it working for the three images that I had, and a 'placeholder' for the fourth image (which was really the first image "My Account" beginning to tile along the x-axis).

I did note an anomoly with at least one image being 3-px wider than the other two (was w=93px and h=200px?? whilst the other two were 90/200px) and that sort-of messed me up a bit with the dimensions. I'll check each of these new image and re-size if necessary to ensure conformity. (I may have merged them undeftly too, so it could be my fault... image manipulation is not my fave thing).

So this will be a 2-state ('anchor-at-rest', and "hover") rollover... you know, -we could do a THREE-state rollover too (to include "active" ("mouse down") at some point, with only mild markup changes. For right now though, -will work to get 2-state working.

(hurrying to beat the 30-min. time-out for editing: )

One of those images makes no contextual sense (see screenshot), -but I have the two images of the microphone anyway, so we're okay:

**TehLibrarian** · 03-22-2007 03:17 PM

Originally Posted by WebJoel

Excellent!

One of those images makes no contextual sense (see screenshot), -but I have the two images of the microphone anyway, so we're okay:

Yeah, the Events.jpg is a totally different image and doesn't have anything to do with this one so its the Events2.jpg and Events-over.jpg. There are a lot of extranious files on our FTP that I need to go through and clean out.

**WebJoel** · 03-22-2007 03:34 PM

I'm about ready to call it day, -but here is what I have so far. Using the attached image and the HTML below, we have a CSS rollover that is 99% identical for IE/Fx (in Fx I see about a half-a-pixel discrepancy on the far-right image.... might have some width off or something..).

I'll work the main-other parts of your page either tomorrow or later tonight.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
* {margin:0; padding:0; border:0;}/* Re-set IE to "zero" for these values */
body {background-color:#d8d8d8;}
#osceola {width:728px; height: 204px; background: url(images/osceola-Lib.jpg); position:relative;
border:3px double gray;}

#osceola li {list-style:none; display:block; position:absolute;}

#osceola a {display:block;}

#osceola1 {left: 0px; top:0; width:91px; height:200px;}
#osceola2 {left: 90px; top:0; width:92px; height:200px;}
#osceola3 {left:182px; top:0; width:91px; height:200px;}
#osceola4 {left:272px; top:0; width:91px; height:200px;}

#osceola5 {left:364px; top:0; width:92px; height:200px;}
#osceola6 {left:454px; top:0; width:92px; height:200px;}
#osceola7 {left:546px; top:0; width:91px; height:200px;}
#osceola8 {left:636px; top:0; width:92px; height:200px;}

/* Next: state anchor-image height ONLY */
#osceola1 a {height:200px;}
#osceola2 a {height:200px;}
#osceola3 a {height:200px;}
#osceola4 a {height:200px;}

#osceola5 a {height:200px;}
#osceola6 a {height:200px;}
#osceola7 a {height:200px;}
#osceola8 a {height:200px;}

/* <------ Key -------- To ---------- Below: ---------- LEFTpx TOPpx no-repeat --> */
#osceola1 a:hover {background: url(images/osceola-Lib.jpg) 0px -200px no-repeat;}
#osceola2 a:hover {background: url(images/osceola-Lib.jpg) -90px -200px no-repeat;}
#osceola3 a:hover {background: url(images/osceola-Lib.jpg) -182px -200px no-repeat;}
#osceola4 a:hover {background: url(images/osceola-Lib.jpg) -272px -200px no-repeat;}

#osceola5 a:hover {background: url(images/osceola-Lib.jpg) -364px -200px no-repeat;}
#osceola6 a:hover {background: url(images/osceola-Lib.jpg) -454px -200px no-repeat;}
#osceola7 a:hover {background: url(images/osceola-Lib.jpg) -546px -200px no-repeat;}
#osceola8 a:hover {background: url(images/osceola-Lib.jpg) -636px -200px no-repeat;}
</style>
</head>

<body>
<div style="position:absolute; left:10px; top:20px; z-index:101;">
<ul id="osceola">
<li id="osceola1"><a href="#nogo" title='Click to go to "My Acco****"'></a></li>
<li id="osceola2"><a href="#nogo" title='Click to go to "Catalog"'></a></li>
<li id="osceola3"><a href="#nogo" title='Click to go to "Contact"'></a></li>
<li id="osceola4"><a href="#nogo" title='Click to go to "Events"'></a></li>
<li id="osceola5"><a href="#nogo" title='Click to go to ""'></a></li>
<li id="osceola6"><a href="#nogo" title='Click to go to ""'></a></li>
<li id="osceola7"><a href="#nogo" title='Click to go to ""'></a></li>
<li id="osceola8"><a href="#nogo" title='Click to go to ""'></a></li>
</ul>
</div>
</body>
</html>

**WebJoel** · 03-23-2007 12:58 PM

Edit: -the above assumes that the images are being kept in a folder called "images", -in case anyone tries downloading & testing this themselves and discovering that there is no image...

**TehLibrarian** · 03-23-2007 01:18 PM

They are indeed. ^^

**spiresgate** · 03-24-2007 11:41 AM

I am following this with great interest as I want to understand how these roll-overs work. I understand how you can make it bright to dark simply by rearranging the upper and lower halves of the single image, but I am trying to do it by selecting the bottom half for the at-rest view but I can't, altthough I can make the hover view any bright or dark picture I like by selecting different left-top values. Am I missing something simple?

I'd appreciate WebJoel's comments.

**WebJoel** · 03-24-2007 12:33 PM

Originally Posted by spiresgate

... I am trying to do it by selecting the bottom half for the at-rest view but I can't, altthough I can make the hover view any bright or dark picture I like by selecting different left-top values. ...

You could swap the a:hover position for the a, and the a positioning for the a:hover and this will work 'backwards'.

I should point out for any number-efficinados that while examining my 'positioning' you might notice that some 'positions' are increments of "90px", while another might be an increment of "91px". -This is not an err of coding, -but an error of photo-editing (mine). While using the 16 individual images of the OP to depict the 8 -at rest' and 8 'hover' states, I attempted to 'combine them' using PaintPro and might have over-lapped an image or two, resulting is a 1-pixel discrepancy. -This could be fixed via the photo software, but (for me anyway) it is more easily repair by a minor adjustment in the CSS coding that dictates the width of each 'portion' being called for a:hover.

This is a rather large & complex example to examine but it does have the virtue of being horizontally-linear, which makes making the 'hover position' easy to figure out... always "add 90" (the width of each) and "substract 200" (the height of each).
-Complex is using a more freeform like a 5 or 6-petal flower. -I did one of those... if you're interested I could attach as ZIP.(?)

**spiresgate** · 03-24-2007 04:48 PM

Yes that would be interesting.

I am still trying to figure out how the present code works. I really need to get my head round the relative/absolute thing as I think this is something I am not quite getting.

**WebJoel** · 03-24-2007 05:50 PM

Sidetracking the thread, -hopefully not 'hijacking' the thread as the material is related and the code used is identical as OP's:
Attached is a 'artist's palate' that I made using a default PaintPro 'button', stretched elongated, and warped an edge to make a thumb-slot, and 'punched a hole' in it.
Then, using the paintbrush tool, painted five 'splotches' of colorized/monotone darkness, replicated the whole image two times and pasted them vertically, and painted-over selected dark-splotches with color and text. Attached are the ZIP-folder, -and for quick-viewing, just the image "palate.gif", depicting the entire image which gets 'positioned' on-hover to reveal only the current link (main, contact, gallery, etc).

In the ZIP file's "index.html", the code:

#palate1 a {height:73px; border:1px solid white;} /* ARTIST: green */
#palate2 a {height:73px; border:1px solid white;} /* BIOGRAPHY: pink */
#palate3 a {height:73px; border:1px solid white;} /* MAIN: red */
#palate4 a {height:73px; border:1px solid white;} /* CONTACT: teal */
#palate5 a {height:73px; border:1px solid white;} /* GALLERY: blue */

Gives a 1-px white border to the anchor, -where the image is 'hot'. Of course, this makes the image 'jump' alittle on-hover. REMOVE the "border:1px solid white;" from the CSS and try the effect...it is clean, motionless, cross-browser.

Also,

#palate {
width:295px;
height:730px;/* 240px*/
background: url(images/palate.gif);
margin:0;
padding:0;
position: relative;
border:none;
}

shows entire "palate.gif" image. change height:730px" to "230px" to hide the bottom two images... completes the effect.

-Very sharp!

Thread: Text Over Image On Rollover

Thread Tools

Display

Text Over Image On Rollover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions