Div should get pushed up by other div relative to it's height

[cgoldt]

Hi everybody,

I would like to create a nice hover effect on my portfolio items.

First I just want to show the title. When I hover the thumbnail, the title should move up and give space for the subtitle under it.

I just managed to give the title a fixed movement, that’s not relative to the height of the subtitle. I would prefer to use long and short subtitles and change the movement of the upper div relative to the subtitle’s height.

You can test it at my CodePen Example: http://codepen.io/anon/pen/vgdMEv.

Anybody has an idea how to solve this with CSS?

Thanks for your help! Cara

[Paulie_D]

There seems to be something wrong with your Codepen (at least for me)…it keeps reloading the page in Chrome.

[Paulie_D]

Seems OK in Firefox though.

Your structure seems strange. The image should not be a background, it’s content so it should be in the HTML.

However, the principle here is not to use positioning except to position the figcaption offscreen (basically in the figure overflow) by positioning it absolutely then use top:100%

Then drag it up by using a transform by just enough to make your title visible (say 50px). Then on hover transition the transformY to -100% thus bring it back up to only it’s actual height.

Like so:

http://codepen.io/Paulie-D/pen/zNbdeL

[Author]

Posts