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@

Confused · 24 Sep 2010 at 12:26

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.

Makhaira · 24 Sep 2010 at 12:27

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!

Tripnologist · 24 Sep 2010 at 12:57

B@Th*nG said:
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.

mr.sly · 24 Sep 2010 at 13:50

Depending what browsers you need this to be supported in, you could use 'Opacity' set it 0 for default then 1 for hover.

helium · 24 Sep 2010 at 15:09

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

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@

Confused · 24 Sep 2010 at 16:47

Excellent!

Tripnologist · 24 Sep 2010 at 16:49

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.

FabienO · 24 Sep 2010 at 17:34

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

example

www.fabieno.com/minecraft/ The download button

Tripnologist · 24 Sep 2010 at 17:42

FabienO said:

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;}

FabienO · 24 Sep 2010 at 22:58

Tripnologist said:
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.

Tripnologist · 24 Sep 2010 at 23:02

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.

Dj_Jestar · 25 Sep 2010 at 03:18

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)
}

Tripnologist · 25 Sep 2010 at 10:06

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.

Randomface74 · 25 Sep 2010 at 10:49

My solution would be to shift the position of the background image on hover, that way the image is preloaded and the hover is responsive.

FabienO · 25 Sep 2010 at 11:13

Where'd you learn the business Tripno?

Tripnologist · 25 Sep 2010 at 11:46

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.

FabienO · 25 Sep 2010 at 12:41

I am hoping to do the same thing. But PHP Developer since I am terrible at design. Not really gotten anywhere so far

www.FabienO.com currently working on www.FabienO.com/minecraft/