How to: Icon Size Increase on Mouse Over

[eawucker]

Hi - I would like to make my gallery icons/thumbnails increase in size when selected (aka move the mouse overtop). How do I do that?

fyi - The Sheperd Family site does it, for example. :bow

[eawucker]

Hi - I would like to make my gallery icons/thumbnails increase in size when selected (aka move the mouse overtop). How do I do that?

fyi - The Sheperd Family site does it, for example. :bow

Anybody?

[jfriend]

Hi - I would like to make my gallery icons/thumbnails increase in size when selected (aka move the mouse overtop). How do I do that?

fyi - The Sheperd Family site does it, for example. :bow

The shepherd familly site (http://bigwebguy.smugmug.com/) is using custom YUI javascript animation along with some custom CSS layout to make the thumbs animate larger when the mouse goes over. The code for it is in his bottom javascript in his page, but I'm not familiar with it.

It is a cool effect.

[chrismoore]

Another thing you can do is add hover to your CSS. For example:

.gallery_XXXXXX img:hover {width: 150px; height: 300px;}

You may have to tweak it a bit based on whether you are adding it to an html gallery or a regular viewing gallery. The size you enter is the size the images will be when the mouse passes over them. It's not as elegant as the site mentioned by jfriend, but it does the same thing

[eawucker]

Hi chrismoore,

ref- www.wuckert.com (http://www.wuckert.com)

I tried to add the following to my CCS section as a test and nothing happened. What am I not understanding?

.gallery_6457413 img:hover {
width: 300px;
height: 300px;
}

Thank you for your assistance - Emil

[eawucker]

Hi - I kept playing around with it and the following worked well.

.homepage img:hover {
width: 105px;
height: 105px;
}
.category img:hover {
width: 105px;
height: 105px;
}

Not perfect (sizes over text on left does not move), but works good enough. Please let me know if I should do anything else to tweak.

Thanks A LOT... Emil:clap

[jfriend]

Hi - I kept playing around with it and the following worked well.

.homepage img:hover {
width: 105px;
height: 105px;
}
.category img:hover {
width: 105px;
height: 105px;
}

Not perfect (sizes over text on left does not move), but works good enough. Please let me know if I should do anything else to tweak.

Thanks A LOT... Emil:clap

You can add this CSS to push the text a little further from the thumbs so it doesn't overlap when the thumbs expand:

.homepage .photo, .category .photo {margin-right:10px;}

Also, do you realize that once someone has gone to one of your categories, there is no obvious way to get back to your homepage. And, once they've gone to a gallery and looked at a few images, they are completely stuck without manually editing the URL to get back to the homepage. If you are going to hide the breadcrumb (which is how this problem is normally solved), then you should provide an alternate way for your viewers to navigate. Otherwise, they are pretty much stranded after looking at just your first gallery.

[eawucker]

Hi John,

I appreciate the additional tweaks. I also appreciate pointing out that the results of some of my other playing around. I put the breadcrumbs back.

Thanks,

Emil