css slide-out divs in grid arrangement

Question

I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?

What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.

The way the bottom div reacts in the second column is not what I'm going for, though.

Any ideas?

Thanks, appreciate it!

http://jsfiddle.net/nbFkZ/

So you don't want the lower div to move down with transition, that it goes down instantly? — Dion, Jun 08 '12 at 21:10
Nah, I'd like it to move down with a transition. Right now though the animation isn't showing up for the first column bottom div, and it's pushing it way too far. — JackArrgon, Jun 08 '12 at 21:44

doptrois · Accepted Answer · 2012-06-09T15:24:16.727

2

Through your comments, i think i understood your question finally:

What I've done:

I've moved the second and third li into a new UL-elements.
And let both UL elements float to the left.

The HTML is a bit to much to post here, so i just post the CSS:

ul.things {
    list-style: none;
    float: left;
    width: 240px;
}

ul.things li {
    display: inline-block;
    /*float:left;*/
    margin:15px;
}

HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/

Hope it helps :)

edited Jun 09 '12 at 15:24

answered Jun 09 '12 at 13:37

doptrois

1,560
11
10

Sweet, thanks for the tip. It's really close to what I'm going for, but is there a way for the div below the one being moused-over to be the only one that's pushed down? Thanks again! – JackArrgon Jun 09 '12 at 14:41
Of course :) I've edited my post to your needs. [HTML, CSS & live demo](http://jsfiddle.net/nbFkZ/4/) – doptrois Jun 09 '12 at 15:25
Now the elements at the left and right side have no affect to each other. If you hover over an element, the element above will move down synchronously and the other column will stay at the same place. I hope thats what you expect. – doptrois Jun 09 '12 at 15:32
Awesome! Thanks a bunch for the help, really appreciate it. Fairly new to css/html and just couldn't get my head around this one. – JackArrgon Jun 09 '12 at 16:47

css slide-out divs in grid arrangement

1 Answers1