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.
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.
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.
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.
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.
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.
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).
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.
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…
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
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
