CSS Forum

**raptrex** · 12-08-2007, 05:30 PM

im wondering how to display text over the images when you hover over the image like here http://digg.com/images/mosaic

**Joshy D** · 06:39 PM

i believe the have used javascript...i will look into it for you...but if it is javascript then i cant help, sorry.

EDIT: yer, javascript and rss feeds.
sorry, cant help but at least you know what language it is.

Although there may be a way to do it with css, but i expect it would still be sensible the rss unless you were going to have the dame images permamently.
However, im not expert, dont take my word for, there are people with far more intelligence than me like the 2 that are always helping me chrishirst and LadynRed.

**raptrex** · 09:38 PM

anyway to do this with css
like make the text inside the pic when u hover

i can do it with one image, but i want to be able to do it with more than one

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>hover images</title>
 
<style type="text/css" title="text/css">
.post a span{display:none;}
.post a:hover span{display: block;position:absolute;top:10px;left:10px;z-index: 100;width:128px;color:#000;}
</style>
</head>
<body>
 
<div id="content">
 
<div class="post">
<a href="#"><img src="http://www.cssremix.com/wp-content/uploads/2007/12/greenrenaissance.jpg" /><span>this is some test thats suppose to go over the image</span></a>
</div>
 
<div class="post">
<a href="#"><img src="http://www.cssremix.com/wp-content/uploads/2007/12/greenrenaissance.jpg" /><span>this is some test thats suppose to go over the image</span></a>
</div>
</div>
 
</body>
</html>

**raptrex** · 12-08-2007, 09:54 PM

ok forget the post above
i found this little tutorial
http://www.wpdesigner.com/2007/09/07...ss-hover-menu/
but the css doesnt work for some reason
.hover-menu is suppose to be hidden until i hover
but its there...

PHP Code:


			
<html>
<head>
    <title>hover images</title>

<style type="text/css" title="text/css">
.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}
</style>
</head>
<body>

<div class=&#8221;hover-wrap”>
Some regular text here that the user sees when viewing the page

<div class=&#8221;hover-menu”>
Here&#8217;s what the users will see when they move their cursors over this area.
</div>

</div>
</body>
</html>

**LadynRed** · 12-09-2007, 12:44 PM

The :hover pseudo class will NOT work on anything except a <a> link in IE6 and below. In order to make it work, you need a bit of javascript - do a search for "whatever hover", it works.