SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS image change on hover

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - I just figured out where the question should have been posted. B'ah - newsters, eh? Thanks again.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.
    Last edited by ralph.m; Feb 18, 2010 at 06:38. Reason: spaling

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The web address will come along in a minute - I have to make 5 posts to be able to post one.

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There you go - that was a minute

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

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hmm, are you using super-large images? I couldn't get the page to load. I'll try again later.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Sorry, page is loading fine now. I'll take a look.

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by briefcasecat View Post
    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.

  13. #13
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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).

    Quote Originally Posted by briefcasecat View Post
    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.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by briefcasecat View Post
    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...

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  18. #18
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Off Topic:

    Quote Originally Posted by EricWatson View Post
    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


  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •