Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Very very simple css question(image hover related)

    hello, im new with css, never use it, but i have a question about a image viewer that im using, the image appears when i hover over it but once i move the mouse it disappears, i know its supposed to because the hover command.


    now what i want is for the image to stay and not disappear after i remove the mouse from the thumbnail, here is the code that im using

    many thanks!
    Code:
    #gallery 
    { position: relative; 
      width: 656px;
      padding-top: 8px;
    }
    
    #thumbs 
    { width: 205px; 
      float: right;
    }
    
    #thumbs a 
    { display: block; 
      float: right; 
      margin: 1px 0px 3px 10px; 
      width: 50px; 
      height: 50px; 
      border: 2px solid #40403E;
    }
    
    #thumbs a img 
    { width: 50px; 
      height: 50px; 
      border: 0;
    }
    
    #thumbs a:hover {border-color: #ddd;}
    
    #thumbs a:hover img
    { position: absolute; 
      width: auto; 
      height: auto; 
      right: 196px; 
      top: 8px; 
      padding: 2px;
      border: 2px solid #40403E;
    }

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    One thing that I have found is; that if, while you are hovering over the trigger; you press and hold the mouse button down whilst moving the pointer into the main picture: As long as the mouse pointer is over the main picture, it will stay on screen.

    http://www.exitfegs.co.uk/Picchoosec.html

    Have a look at this from my website to see if it helps.

    Frank
    Last edited by effpeetee; 10-19-2007 at 08:07 AM. Reason: Added information
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Check over at http://cssplay.co.uk.

    There is a page with Alice in Wonderland pictures, but I can't find it right now...

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Check over at http://cssplay.co.uk.

    There is a page with Alice in Wonderland pictures, but I can't find it right now...
    http://www.cssplay.co.uk/menu/hover_click.html

    Is this the one you mean?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry for the dumb question but what code should i switch out for what to make the image not disappear?

    thanks in advance

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sorry, I can't help you on this. Hopefully someone else will pick this up.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Made much headway. Almost ready for customisation.

    Check out here.

    http://www.exitfegs.co.uk/hovercss.html

    All code available. Just "View Source"

    Frank
    Last edited by effpeetee; 10-22-2007 at 03:25 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/hovercss.html


    NOTE: This is a crib from a CSSPLAY.co.uk program.
    If you use it, please give them credit.

    http://www.cssplay.co.uk/menu/hover_click.html

    Frank
    Last edited by effpeetee; 10-22-2007 at 03:43 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks alot!


  •  

    Posting Permissions

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