Making a hidden image display on rollover (css)

Soldato
Joined
18 Oct 2002
Posts
6,889
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@
 
You'll not be able to do a roll-over on something that's hidden ;)

However - try replacing the image with a div of a fixed size, overflow hidden, and set the background image of that div to the image you want.

Then - "move" the background image positioning based on whether it's hovered or not.
 
Keep it within a container DIV, and always have the DIV displayed. Use the mouseover event on the DIV, to control the image. That way the trigger is always available - it's a bad idea to try controlling things you want to change from the actual element that is changing!
 
I can make it display and then be hidden on hover over, but not the other way around.

B@

Of course it wouldn't work that way. If you've hidden it, how would it be possible to hover over something which isn't there?

I really can't think of a reason why you would want to do this.


Edit: That sounds a bit short, what I mean is, what exactly is it you're trying to do? Maybe one of us could provide a better alternative.
 
Last edited:
Have a div with the image as the background image, on the :HOVER part of the css just put the background image to none or display:hidden etc

(if your not sure on your css i can write our in more detail if you'd like)

ps. you need to set the width and height of the div
 
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@
 
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@
 
btw, you can shorten this..

Code:
#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;
}

to this

Code:
#reveal {
        background: url(photo/ron.jpg) no-repeat 0 113px;	
	width: 629px;
	height: 113px;
	overflow: hidden;
}

Use shorthand for background and then the border, padding, and margin values on a div are all 0 by default so there is no need to declare them.
 
Code:
<div id="download_button">
    <a href="#"></a>
</div>

Code:
div#download_button a:link {
    display: block;
    height: 90px;
    width: 251px;
    background: url('../images/sitedesign/download_button.jpg') no-repeat top;
}

div#download_button a:hover {
    height: 90px;
    width: 251px;
    background: url('../images/sitedesign/download_button.jpg') no-repeat bottom;
}

One image
download_button.jpg


example

www.fabieno.com/minecraft/ The download button
 
Code:
div#download_button a:hover {
    height: 90px;
    width: 251px;
    background: url('../images/sitedesign/download_button.jpg') no-repeat bottom;
}

You don't need to respecify the image as it's already specified on the a. You just need to set the background-position on hover..
You don't need to have the dimensions on hover either, it's just adding extra bloat.

Code:
div#download_button a { display: block; height: 90px; width: 251px; background: url('../images/sitedesign/download_button.jpg') no-repeat;}
div#download_button a:hover { background-position: bottom left;}
 
You don't need to respecify the image as it's already specified on the a. You just need to set the background-position on hover..
You don't need to have the dimensions on hover either, it's just adding extra bloat.

Code:
div#download_button a { display: block; height: 90px; width: 251px; background: url('../images/sitedesign/download_button.jpg') no-repeat;}
div#download_button a:hover { background-position: bottom left;}

TY. Made the changes. Second time I've ever tried the technique. Always appreciate the advice.
 
No problem. I was hoping I wouldn't come across as snarky, but I know I've always appreciated when someone tells me a better way of doing something.

Good on you for mentioning sprites though. I'm still shocked at the amount of websites (even large ones) which use separate images.
 
Code:
<a><div></div></a>
Code:
div, a {
  display: block;
  height: 350px;
  width: 460px;
}
a:hover div {
  background-image: url(http://www.grimmemennesker.dk/data/media/2/LOL.jpg)
}
 
Last edited:
If you're trying to build a standards compliant site, I wouldn't do the above.

You're not allowed to put a block element inside of an inline element.

Edit: However, you can put an inline element in an inline element and then set it to block.
 
Last edited:
Like most I think, I'm self taught. Put my first page up around 1998 using the Geocities page builder. Then around 2000, I learned just enough html to handcode (badly, I admit).

However, it wasn't until 4 years ago that I turned it from an occasional hobby into a career. I started freelancing for a new startup and was full time within 6 months. A year later, I was made a partner.
 
Back
Top Bottom