CSS image change on hover

[briefcasecat]

Hi All.

I am new here (but have sitepoint books), so hope that this the right place to come with begging bowl ready for info.

So... using CSS what is the most reliable way to display an image on hover. It's not straight forward tho. I need to hover on a small image, get it to display a different image larger and center that larger image. And I need to do it 16 times on the same page. It's an image gallery and the small images are crops of artwork and I need the whole artwork shown on hover.

I dont have a link because I am still trying to work it out.

My head hurts from it too.

[ralph.m]

Hi briefcasecat, Welcome to SitePoint!

The ideal place to post this is in the CSS Forum, but here will do. There are losts of ways to do this, with both CSS and JavaScript.

Here is a nice CSS only example, courtesy of EricWatson who frequents these fora:

http://www.visibilityinherit.com/cod...h2-example.php

I've recently done one with a nice bit of JavaScript too, but see if the above does the trick.

[briefcasecat]

Thanks Ralph - I have looked at that source code and will have a play with it tomorrow. It was kind of you to answer so quickly. Where should I have posted that btw - I am sure I will have more css questions in the very near future.

[briefcasecat]

Sorry - I just figured out where the question should have been posted. B'ah - newsters, eh? Thanks again.

[ralph.m]

Yes, sorry, I should have provided the link. There has actually been some discussion lately about whether or not the various fora are arranged in the best way, so don't feel bad. There's a lot to find and explore here.

Hopefully we'll see you here again soon! Good luck with the coding.

[briefcasecat]

Okay ... I have played with Eric's code and his final result looks lovely. My looks like ants on the page and when you hover over them they show a large image. Anyone know how to make the sizes right? I tried giving the class dimensions for display and I tried (and then took out) and then the small image shows as a grey block (the b/g colour is the drop shadow I think) and no image. How can I stuff up code that I just copied. Hmmm... I'd like to think that this happens to people all the time.

[briefcasecat]

The web address will come along in a minute - I have to make 5 posts to be able to post one.

[briefcasecat]

There you go - that was a minute

http://zebramosaic.com.au/galleryTreasures1a.html

[ralph.m]

Hmm, are you using super-large images? I couldn't get the page to load. I'll try again later.

[ralph.m]

Sorry, page is loading fine now. I'll take a look.

[briefcasecat]

Hi there Ralph M. Images are small. Thmubs are 47k and big images are 900k (because they're artworks and need people to see them). Playing round a little more, as opposed to ants, I've got boxes now (in some random order-I need them in rows which will come later) and I see the larger images on hover. But the thumbs are just showing as boxes. Grey, grey boxes..

[ralph.m]

Hi there Ralph M. Images are small. Thmubs are 47k and big images are 900k (because they're artworks and need people to see them). Playing round a little more, as opposed to ants, I've got boxes now (in some random order-I need them in rows which will come later) and I see the larger images on hover. But the thumbs are just showing as boxes. Grey, grey boxes..

900kb for the large images is a bit too big, in my view. You'll get good image quality even at 80kb and lower, which would be better.

As for the thumbnails not appearing, first check to make sure your file paths are correct. Where are the images stored in relation to your root folder?

Sorry I haven't been more helpful. Lots of work on today, I'm afraid, but there may be more time tonight.

[briefcasecat]

Hi again - I have taken your advice, make images smaller, and redone my file structure. Put it up somewhere else too.

http://astirlingeffort.com/gallery.html

So it's getting there but would you go about styling this? The thumbs were stillallover teh place, so I put them in a table (against the law formerly but sitePoint's IE 8 books now tells me to use tables) but no luck so I have put them in a list. With float left & margins. No luck. I am thinking individual divs (aka divitis). What would you do? Thanks so much again.

[ralph.m]

I think the main problem here is that the gallery, as it stands, is really designed such that all the thumbnails have the same dimensions and the large images are also the same size. That's not the case for you, hence the layout problems (as well as not having the same number of images as in the original).

What would you do?

I'm not sure that this is the right gallery for you, given the images you want to display. Honestly, what I would do is use Javascript. I'm not really a fan of having to hover over thumbnails to get the enlargement to appear. It means that visitors have to make sure the mouse doesn't move while they are looking at the image, which is distracting (and I'm not sure how those with motor difficulties or those using keyboard navigation would get on).

I prefer to click on a thumbnail and have the image appear and stay there until I click another thumbnail. This is easily done with JavaScript (and I'm not JS savvy, either, so don't be afraid).

I'm currently working on a Gallery for a calligrapher, based on this model. If you'd like a gallery like this, let me know and I'll tell you how to set it up (if it's not obvious).

PS The gallery I'm working on is here, in case you're innerested.

[PicnicTutorials]

Hi again - I have taken your advice, make images smaller, and redone my file structure. Put it up somewhere else too.

http://astirlingeffort.com/gallery.html

So it's getting there but would you go about styling this? The thumbs were stillallover teh place, so I put them in a table (against the law formerly but sitePoint's IE 8 books now tells me to use tables) but no luck so I have put them in a list. With float left & margins. No luck. I am thinking individual divs (aka divitis). What would you do? Thanks so much again.

Hello, Looks like you got to pull out your calculator and do so math. Nothing adds up. Sketch it out in your head (or paper). Add up the thumb size, borders, margins, padding, large pics, etc, and then piece it together. Get rid of the tables, and float all the thumbs left (or whatever I did in mine)

In my example all my thumbs are the same size. This is for aesthetics and ease of my math skills. If all your thumbs are dif size then you might want to do display inline-block on all the thumbs instead. What ever works...

[Paul O'B]

Off Topic:

Eric you have a bug on this page in Firefox and the thumbs all break out of the container when hovered due to the border increasing the size. You may want to fix that

[ralph.m]

Off Topic:

Eric you have a bug on this page in Firefox and the thumbs all break out of the container when hovered due to the border increasing the size. You may want to fix that

Huh, it works fine in Firefox for me.

[PicnicTutorials]

Off Topic:

Eric you have a bug on this page in Firefox and the thumbs all break out of the container when hovered due to the border increasing the size. You may want to fix that

Works fine for me too on fx 3.5.7. If it's broke in whatever fx then it's fx's fault because all the math is correct.

[Paul O'B]

Off Topic:

Works fine for me too on fx 3.5.7. If it's broke in whatever fx then it's fx's fault because all the math is correct.

Sorry Eric it seems to be me

I've never noticed this before in Firefox but when I paste your link into a tab it loads the page but at a zoomed size even if the tab wasn't zoomed. It seems that at some time I must have increased the zoom size accidentally and when I load that page it always loads it at the zoom size I was using.

I just tried it on other tabs and it seems to remember the zoom size you were last using on that url. Indeed if you have 3 tabs open with the same url it enlarges all of them!

Not a feature I like or find useful but I suppose for users who always want a site at a certain text size it would save them having to adjust it.

Apologies for the confusion as the page is only broken on zoom

[PicnicTutorials]

No prob Paul :~) Yeah a while back I found out too. As you said, FX will remember and apply your previous zoom setting for each site you visit.

[ralph.m]

Off Topic:

Off Topic:


Apologies for the confusion as the page is only broken on zoom

Strange, even zooming that page I don't get the effect you mentioned.

EDIT: sorry, yes I do. I must have gone to a zoom % at which the effect didn't happen, as other zoom levels it does. D'oh!

I was disappointed when Firefox was set to zoom the whole page (rather than text only) by default. Kinda ruins the point of flexible, em-based layouts IMHO. Anyway, I set FF to View > Zoom > Zoom text only.