SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What am I doing wrong?? Simple CSS Image Gallery

    I really need some help with this, I will be forever in your debt.
    What am I doing wrong?

    html: http://paperpiratestudio.com/blake/lm/index.html
    css: http://paperpiratestudio.com/blake/lm/css/styles.css

    The enlarged image in my image gallery follows the cursor horizontally, but I need it to follow vertically, too. Notice when you hover over the lower images, the full sized image is still on the top. I can't figure it out for the life of me!
    Please help!

    THANKS!!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    A likely culprit looks like this line:
    Code:
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    /* left: 230px; */
    z-index: 50;
    }
    That's pushing the <span> to the top of .gallerycontainer, which is the nearest positioned ancestor.

    Another minor point to note – you shouldn't include <style type="text/css"> in a .css file. I'm not aware of any browsers that actually have a strop about this, but that doesn't mean that a newer one that comes along next month won't do...

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That worked great!
    I have another problem now, when you move the mouse to the right quickly, it will stick on the last enlarged image because the cursor is on the enlarged image.
    I want it to only enlarge when the cursor is over the thumbnail only, and not on the enlarged image. Is that possible?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TaJMoX View Post
    I have another problem now, when you move the mouse to the right quickly, it will stick on the last enlarged image because the cursor is on the enlarged image.
    I want it to only enlarge when the cursor is over the thumbnail only, and not on the enlarged image. Is that possible?
    Not easily (if at all) with that construction. The :hover effect is applied whenever your cursor is over part of the <a>. And as the enlarged image is inside the <a> tag, hovering your mouse over the enlarged image, if you can move it there quickly enough, will trigger the :hover effect.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TaJMoX View Post
    I have another problem now, when you move the mouse to the right quickly, it will stick on the last enlarged image because the cursor is on the enlarged image.
    I want it to only enlarge when the cursor is over the thumbnail only, and not on the enlarged image. Is that possible?
    Yes, that's a bit of a problem having the image appear over other thumbnails. Another problem I see is that the rightmost enlargements site partly off screen for me.

    I'd suggest you organize this gallery differently, like in this example:

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


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
  •