CSS hover Photogallery modification

@vlydonOct 31.2007

Hi everyone. I’ve implemented a css photogallery I found online and made some modifications. I haven’t inputted every single image yet, because first I need to figure out how to make an image appear when the user first hits the page, before they ever hover onto an image. Here is the url:

~~[url]~~http://beautifuldayphotography.com/html/indexTESTGALLERY.html[/url]

I want the first image of the woman with the white headband to appear on the page immediately, then have it switch when you hover the other icons. Anyone know how I do that?

Thanks!

to post a comment

CSS

@CentauriOct 31.2007 — #Easiest way is to set the required image as a background to the #gallery div :

[CODE]#gallery {width:650px; top:80px; left:180px; position:absolute; [COLOR="Red"]background: url(images01/007.jpg) no-repeat 112px 0;[/COLOR]}[/CODE]

@vlydonauthorNov 01.2007 — #Great, thank you so much, that's very helpful. I did have to play around with the gallery size to not back the bg image cut off (which it wouldn't to the img, but only the bg img.)

Anyway, I'm not trying to play with adding a click so that if you hover, it puts the image there till you hover away, but if you click, it puts it there till you click another. Is this possible without rewriting from scratch?

@CentauriNov 01.2007 — #

[CODE]#gallery {width:750px; height:530px; top:80px; left:180px; position:absolute; background: url(images01/007.jpg) no-repeat 112px 0;}
 #gallery ul {list-style:none; padding:0; margin:0; width:280px; position:relative; float:right;}
 #gallery ul li {display:inline; width:42px; height:57px; float:left; margin:0 0 5px 5px;}
 #gallery ul li a {display:block; width:40px; height:55px; text-decoration:none; border:1px solid #222;}
 #gallery ul li a img {display:block; width:40px; height:55px; border:0;}
 #gallery ul li a:hover {white-space:normal; border-color:#ddd;}
 #gallery ul li a:hover img {position:absolute; right:285px; top:0; width:auto; height:auto; [COLOR="Red"]z-index: 100;[/COLOR]}
 [COLOR="Blue"]#gallery ul li a:focus img, #gallery ul li a:active img {position:absolute; right:285px; top:0; width:auto; height:auto;}[/COLOR]
 [/CODE]

This was adapted from another of Stu Nicholl's demos.

@vlydonauthorNov 02.2007 — #Perfect. You are a genius, thank you!

CSS hover Photogallery modification

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS hover Photogallery modification

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴