Css 3 Transitions multi-level z-index

Question

Would like to check, I am making a scrolling color <div> which slides color during input:focus but how should I code it so that the scrolling color is above the grey background and below the input field and action button?

Also if you notice, the scrolling part also seems to be scrolling out of the predefined space. I have already set the width to maximum 100% but somehow the fade out part is over the 100% width.

Here is the JSFiddle sample.

Answer 1

Add overflow: hidden; to .commentPost, and position:relative to .commentPostBox and the <span> element. You only need to set z-index to 2: 1000 is a bit excessive.