CSS to make partly visible div / element expand fully on mouseover

Question

I am trying to create two divs side by side but because they are quite big I want only part of them to show up initially, then expand fully on mousover/click.

I see Hipmunk doing a wonderful job of it for their Flight Search and Hotel Search.

Any ideas how this can be achieved?

Welcome to SO. Can you update your profile and say something about your background such as: experience with HTML. CSS, JavaScript, otherwise it is hard to know how to pitch an answer. Also say which country you are in... Thanks. — Marc Audet, Jul 02 '13 at 18:17
What have you tried? Have you checked how hipmunk does it? Show us some code, and ask a specific question when you get stuck... — Pevara, Jul 02 '13 at 18:17

score 0 · Answer 1 · answered Jul 02 '13 at 18:16

0

Apply a specific width and overflow:hidden.

On click/hover set a new width to show all the content.

answered Jul 02 '13 at 18:16

GuiGreg

341
1
8

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You would have found lots of related question on stackoverflow for this:

see these similar questions and solution:

Expand / shrink div on hover / out with jQuery

Expand Div over others on mouse over jquery

edited May 23 '17 at 12:28

Community

1
1

answered Jul 02 '13 at 18:17

vendettamit

14,315
2
32
54

CSS to make partly visible div / element expand fully on mouseover

2 Answers2