Gallery-like positioning puzzle

Hey folks.

I'm stuck and I hope someone with better mastery of CSS can help me.  I have a list of images that go across the screen in rows.  Five per row.  When the user rolls over an image, I want to see an expanded view of that image, along with some metadata at the bottom.  Right now, I store two different images, one as the icon and one as the expanded view.  I created two different DIVs, one for each state.

So, I used "float" to make the thing go into rows, but now when I expand, it pushes the icons around.  Like this:

Starting position:
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX

XXX XXX XXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX

Rolls over top row, second from left:

NOT what I want but what is happening:
XXX YYYYYY XXX XXX XXX XXX
XXX YYYYYY XXX XXX XXX XXX
XXX YYYYYY XXX XXX XXX XXX
        YYYYYY
        YYYYYY
        YYYYYY

XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX

What I DO want:

    YYYYYY
XXYYYYYYXX XXX XXX XXX
XXYYYYYYXX XXX XXX XXX
XXYYYYYYXX XXX XXX XXX
    YYYYYY
XXYYYYYYXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX

II hope that's clear and I'm sure there's a way to do this but right now I'm just stuck.

Thanks in advance.
LVL 2
cookiejAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Cornelia YoderArtistCommented:
I use this (www.corneliayoder.com) and love it:

Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
0
cookiejAuthor Commented:
The artwork is certainly beautiful, Cornelia.  However I have some metadata that I want to display in-place upon rollover.

I've seen this technique done before but it's always so buried in other code that I've had a hard time making it work.
0
Cornelia YoderArtistCommented:
This code from dynamicdrive will let you put your metadata as well as the picture into it, like the captions on my pictures.  I found it very easy to use, but if it doesn't work for you, then I'm sure others may have other suggestions.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

cookiejAuthor Commented:
From an interface perspective, I'd rather keep the user focused on the item being viewed.  Have the thumbnail expand directly from where it's located, akin to pulling a book from the bookshelf, or stepping closer to an image in a real-world gallery, rather than having the subtle distraction of watching where you put your mouse, then looking back at a different location.

I know it seems a lot of work for a subtle distinction.  But across a whole application, these small differences can really affect the user experience and the attitude toward the app.

Plus, since I haven't gotten a lot of traffic, I'll kick it up to 500 for a simple, elegant set of CSS code that'll do what I want.
0
cookiejAuthor Commented:
OK.  I figured it out.

The trick is to use display: block/none for the larger image, with absolute positioning and to use visibility: hidden/visible for the smaller icon-like thumbnail.

visibility: hidden maintains space for the image (it just hides it) while display:none removes the element from the window, letting other elements flow into the empty spot.

I'm sure this is a solid "duh" for the experts out there but since noone paid much attention to this one, It's 500 easy points that got away.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cornelia YoderArtistCommented:
Sorry, cookiej, but apparently this wasn't anything that was obvious, or lots of people would have posted, without regard for the number of points.  I'm glad you figured it out to your satisfaction, but your bitter tone really isn't warranted.  Thanks for sharing the answer, and good luck with your new website.
0
cookiejAuthor Commented:
Ah.  This is the failing of text-only.

You mistook my tone.  I'm not bitter.  I was surprised, perhaps, at the lack of response.  Maybe I didn't phrase the question well, but this was the kind of softball question I figured would get answered almost before I submitted it!

I mean, I've seen this done all over the web.  Adobe's spry demo gallery employs the technique (although they have a much cooler grow/shrink).  And really, my solution was pretty basic.  No calculations, no coding, really just understanding the difference between display and visibility.

But I wasn't bitter.  And truly, thanks for trying to help!  I love your artwork.
0
Cornelia YoderArtistCommented:
Well, I know when I started doing my website, I was completely at a loss, and I found the dynamicdrive site through looking at the source of a webpage that I liked.  I had no idea how to do it at first, so maybe you should sign up as an expert now :)

If you wish, you can go to Community Support and ask to have your points refunded.

And thanks for the kind compliment on the art :)
0
Cornelia YoderArtistCommented:
I have no objection.  My answers weren't what he wanted and I suggested he ask for the refund, so go ahead and refund his points any time.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.