Create a slide panel using CSS and HTML

Question

I want to create a homepage for a website. I would like the home page to have 4 or 5 rectangles, one after the other, down the center of the page. Each of these rectangles will have an image (on the left) and some text (on the right) inside them.

When the user iterates over each rectangle, I would like it to stretch vertically down the page by 4-500 pixels (maintaining its horizontal length) and have rectangles lower than the one that was shoved, also move down the page (to place the expanded "box" ) When the mouse is removed from the "drawer", the "drawer" is removed to form the original rectangle, and the remaining rectangles are returned to their original position.

The contents of the “drawers” ​​will be text and images, with the original rectangle remaining stationary and acting as the heading or heading for the “drawer”. My question is: how would I accomplish the task of expanding each of the rectangles, simultaneously moving the other rectangles, and then removing them when the mouse is taken away.

I suppose this will be done with CSS transition materials (and maybe with some fancy HTML5 materials?), But this is where my CSS knowledge ends. I understand that this is a rather big and difficult question, so any help would be highly appreciated.

Thank you very much.

Answer 1

You are looking for something similar to what is called an accordion menu. They can actually be done using the CSS3 transition property. No HTML5 function needed. See here for an example. One small difference in this example is that the first menu item remains expanded when you hover over it while you seem to want to expand it. But let's pick a little example, and I think you should have what you need.

Answer 2

You can use CSS3 transitions of ^{the W3C , MDN Docs specification} in the pseudo-class :hover ..

Demo at http://jsfiddle.net/gaby/mX7qN/