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 7 of 7
  1. #1
    New Coder futureproof's Avatar
    Join Date
    Nov 2009
    Posts
    70
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Css image hover to fit other #div

    Hey, sorry about the delay. I was trying to find a free host so I could further communicate the issue. This is what the page currently looks like:

    http://futureproof.000a.biz/photo-gallery2.html

    I'm fairly new to CSS, but up until this point I haven't had any problems integrating and coding my ideas through it. I've tried to find a solution to this problem on the web but to no avail.

    Basically I have a gallery website with content in the middle. it looks like this:

    -----------------
    #Side A | #Side B
    -----------------

    Side A contains a graphic and Side B contains thumbnail images. I had the idea of hovering over the thumbnails in Side B so the floating image would replace the dimensions or cover Side A.

    The problem is when the image hovers over Side A, it doesn't replace the properties of #Side A. It merely hovers over Side A. This means that the dimensions don't take side A into consideration. If the monitor resolution increases/decreases, if the browser size increases/decreases, the hovering image from Side B does not align over-top of Side A.

    Side B thumbnail floats in the exact same spot/size, while the CSS style and html increase/decrease according to the resolution and properties of the screen.

    Is there any way to replace the hovering contents of Side B over into the contents of Side A so it automatically re-sizes to the specified dimensions of side A?

    once again here is the page:
    http://futureproof.000a.biz/photo-gallery2.html

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Are you opposed to using any other method than what you have already set up?

    If not you could use a pre-made Javascript carousel or something of that nature and just style it to your needs.

    Let me know if I can help you with that.

    There are some good ones here:
    http://www.smashingmagazine.com/2007...ws-lightboxes/

    If you would rather keep what you have thatd be more complicated but let me know and I can go over the code some more.

    thx... & i hope that helps
    k

  • #3
    New Coder futureproof's Avatar
    Join Date
    Nov 2009
    Posts
    70
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Those galleries look nice but I'm trying to keep it basic and fast. The hover works but its not resizing. Isn't there a small piece of code for the image to simply inherit the other side ?

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Ok understood. In that case I can look over your code this evening if noone helps before then.

    I don't think there are just a few simple lines you can throw in to make it work but it is doable with some work

    thx

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Okay

    So, after messing with this.. a few days late (sorry for that)

    This is the fix I came up with:

    Code:
    #text a.gallery:hover span {
        position:fixed; 
        width:509px; 
        height:390px; 
        top:140px;
    	margin:0 auto;
    	right:375px;
        color:#000; 
        background:#DED8B7;
        }
    The right margin could be reduced to 371 I THINK, if you take away the 5px right margin on a.gallery:hover img in your css. But that's up to you.

    Now this makes the image appear where it should in FF3... I do not think how this gallery is set up is very solid though just because of the fixed position of your hover image (although I like that you're striving for simplicity) so please test it in other browsers.

    Also, on line 204 of your HTML code there appears to be a broken, maybe.. css comment? '*\' which continues as --!> on line 205 that you may want to take out.

    I hope this helps

    thanks!
    k

  • Users who have thanked kristingish for this post:

    futureproof (12-09-2009)

  • #6
    New Coder futureproof's Avatar
    Join Date
    Nov 2009
    Posts
    70
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Brilliant.
    That fixed everything for now
    You obviously know what you are doing. Thanks for the help. If there's anything I can do in return, let me know.

  • #7
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Im so glad it helped you!


  •  

    Posting Permissions

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