Animated shrinking header image issue (codepen)

I have a codepen of an animated header here:"]

The idea is that as you scroll content, the header shrinks out of the way - great for tablets.

But as you can see, the image shrinks to it's own centre, whereas the ideal situation would be for it to shrink to top left to keep the whole header in some sort of perspective - any ideas?

Huge list of CSS3 Tutorials, Resources, Libraries and Examples

Man I really the huge collection of CSS3 tutorials and resources curated here

If you know any other resources like this, please share with me... It will be useful to me and my brother.

Add Bouncy effect to part of a image.

I am trying to code a web version of iphone app wobble( in css and javascript.

I tried HTML5 canvas, but had very bad performance issue.

Now trying css keyframes and transitions, but no improvement in performance. Because I have to load same image more than 200 times at a time to give such bouncy effects by manipulating each pixel.

Is there any other better way to do this.

Transitions Opacity Help


Started to experiment on CSS3 transitions and if you look into the 1st image under products page, it has a mouseover fadein effect.

How can i have the black background stay %80 opacity when it fades in and the

element (available) %100?

One last thing, is there any way to vertically align the

element in the middle without using "line-height" property?

thanks in advance


HTML5 anchor name & target

An named anchor, so you could target section of the page, like jump to content, used to be

<a name="content"></a>
notice no href.
You could access it in a link prefixing the name with a '#' like
<a href="#content">Jump to content</a>
This is still supported by browsers but no longer valid HTML5.

"" wrote:

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

Or you could add '#content' without the quotes to the end of the url in the browsers address bar.

Syndicate content