Making a hidden image display on rollover (css)

B@Th*nG · 24 Sep 2010 at 12:12

Hey guys,

Am just learning some xhtml and css and i'm struggling to get an image to be hidden and then display on hover over. Any thoughts?

I can make it display and then be hidden on hover over, but not the other way around.

B@

B@Th*nG · 24 Sep 2010 at 16:35

Ok, this is what i've got so far, i'm going for the div set as background option. i'm just short of what to put between the "div#reveal" bits (yes i am new to this

)

Code:

<head>
<style type="text/css">

p {
	margin: 0;
	padding: 0;
}



#reveal {
	background-image: url(photo/ron2.jpg);
	width: 629px;
	height: 113px;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}


div#reveal {
	
}

div#reveal:hover,active {
	
}


</style>
</head>


<body>
<p><img class="nonothing" src="photo\ron1.jpg" title="The" /></p>
<div id="reveal"></div>
<p><img class="nonothing" src="photo\ron3.jpg" title="picture" /></p>
&nbsp
<p><a href="popups.html"><img class="nobord" src="img\nav_next.png" title="Next Page" /></a></p>

many thanks!

B@

B@Th*nG · 24 Sep 2010 at 16:43

no worries, have sussed it, thanks

Code:

<head>
<style type="text/css">

p {
	margin: 0;
	padding: 0;
}



#reveal {
	background-image: url(photo/ron2.jpg);
	background-position: 0px 113px;
	background-repeat: no-repeat;
	width: 629px;
	height: 113px;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}




div#reveal {

}

div#reveal:hover,active {
	background-position: 0;
}


</style>
</head>


<body>
<p><img class="nonothing" src="photo\ron1.jpg" title="The" /></p>
<div id="reveal"></div>
<p><img class="nonothing" src="photo\ron3.jpg" title="picture" /></p>
&nbsp
<p><a href="popups.html"><img class="nobord" src="img\nav_next.png" title="Next Page" /></a></p>

B@

Making a hidden image display on rollover (css)

B@Th*nG

B@Th*nG

B@Th*nG

B@Th*nG

B@Th*nG

B@Th*nG