Need some CSS Help, I am very close, but can't quite get this

[funmed]

URL: http://funmedusa.com

On the right hand side of the page, just under the main nav links, you’ll see a black “arrow” button with the words “Executive Summary” inside. When you hover over the button, the black container extends, and the text moves with it. The container is working well, but the text moves in a choppy manner. Can someone help me fix this so it’s smooth?

Thanks!

[chrisburton]

@funmed Play around with my version:

http://codepen.io/chrisburton/pen/eGHmj

[Soren]

Increase padding-top of #executive-summary-bar when it’s hovered over. This will move everything down together including the link and triangle.

e.g.

before hover = padding: 30px 3px 7px;
on hover = padding: 46px 3px 7px;

You don’t need css transition on the link.

[funmed]

@chrisburton I need the “Executive Summary” text to move smoothly with the container. It moves now, but is choppy.

@Soren, I tried your code, but I see no change.

[Soren]

Try this link: pen/zogmn

Same effect, just one element: pen/wKzHy

[funmed]

That seems less choppy. It looks perfect on your codepen, bu ton my site, it’s still a bit off. Can you please take another look??

[Soren]

Hmm yeah, your #executive-summary link seems to have a style that effects it on :hover. My example only transitions the padding of #executive-summary-bar.

This is your code. I’ve commented out a few styles I think are causing your issue: pen/Ltrud

[Author]

Posts