Roll over image to display text

3 replies [Last post]

Fri, 2011-12-23 01:06

knotaknoob

Offline

Last seen: 1 year 21 weeks ago

newbie

Timezone: GMT-8

Joined: 2011-12-23

Posts: 1

Points: 2

I am working on a simple 3 x 3 grid display, what I am trying to accomplish is a series of 9 images, but when hovered/moused over some descriptive text is shown.

This is my code now, and the problem I am having is that the two objects wont lie over each other properly, any ideas?

Thanks!

<style>
.cssnav
{
visibility: visible;
position:relative;
white-space:normal;
display: block;
 
}
 
.cssnav a
{
color: black;
text-decoration: none;
}
 
 
 
.cssnav a:hover img
{
visibility:hidden;
background: #0CC;
}
 
.cssnav span
{
 
visibility:visible;
position:absolute;
background-color:#00CC99;
cursor: pointer;
height: 182px;
width: 182px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
margin: 0;
padding: 0;	
} 
</style>
<table width="620">
<tr>
 
 
 
 
 
<td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td>
 
 
</tr>
<tr>
 
 
 
 
 
<td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td>
 
 
</tr>
<tr>
 
 
 
 
 
<td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td><td width="205" height="200">
<div class="cssnav">
<a href="www.site.com">
<img src="img.gif"/> 
<span>
 
descriptive text
  </span></a>
</div>
</td>
 
 
</tr>
 
 
</table>

Tags:

Tue, 2012-02-21 10:51

balajidesign

Offline

Last seen: 26 weeks 1 day ago

Enthusiast

Timezone: GMT+5.5

Joined: 2012-01-31

Posts: 116

Points: 124

i dont understand what is

i dont understand what is your problem. can you explain this.

Mon, 2012-02-27 19:28

Design My CSS

Offline

Last seen: 51 weeks 4 days ago

Regular

Timezone: GMT+1

Joined: 2012-02-23

Posts: 36

Points: 37

You have set the z-index and

You have set the z-index and position to absolute of the image so that it overlays the span.

Add this to your style

img
{
position:absolute;
z-index:1;
}

Hope this helps
Pete

Hope that helps!
Pete
www.designmycss.com

Mon, 2012-02-27 23:07

gary.turner

Offline

Last seen: 22 hours 7 min ago

Moderator

Dallas

Timezone: GMT-5

Joined: 2004-06-25

Posts: 8761

Points: 2704

Noodling

Me, I'd switch the opacity, and use a proper container for a list of links. This is not a tabular data-set.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test document</title>
    <style type="text/css">
      ul#nav {
        border:  1px dotted gray; /*for clarity*/
        padding: 0;
        list-style: none;
        text-align: center;
        width: 630px;
        word-spacing: -.3em; /*optional*/
        }
 
      #nav li {
        display: inline-block;
        height: 200px;
        outline: 1px dotted gray; /*for clarity*/
        text-align: left;
        width: 205px;
        word-spacing: normal;
        }
 
      #nav a {
        display: block;
        text-decoration: none;
        position: relative;
        }
 
      #nav img {
        border: none;
        display: block;
        height: 200px;
        width: 205px;
        }
 
      #nav span {
        opacity: 0;
        bottom: 0;
        left: 0;
        position: absolute;
 
      /*transition is an optional progressive enhancement 
        for folks who have up-to-date modern browsers*/
        -moz-transition: all 1.5s;
        -o-transition: all 1.5s;
        -webkit-transition: all 1.5s;
        -ms-transition: all 1.5s;  /*for IE10*/
        transition: all 1.5s;
        }
 
      #nav a:hover span {
        opacity: 1;
        }
 
    </style>
  </head>
 
  <body>
 
    <ul id="nav">
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
 
      <li><a href="http://sample.com">
	  <img src="img.gif" 
	       alt="replacement text" />
	  <span>Descriptive text</span></a>
      </li>
    </ul>
  </body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Roll over image to display text

i dont understand what is

You have set the z-index and

Noodling

User login

Navigation