Q:

CSS3 Transform to reveal lower layer

I'm learning to use CSS3 Transforms. I've created the demo below that reveals a portion of the layer beneath the visible layer.
http://codepen.io/anon/pen/uFHpe
On hovering over over the revealed layer, I would like it to remain visible but at the moment it causes the revealed layer to close.

A:

Try appliying it when over is hovered and when background is hovered using the sibling selector ~ 
.over:hover, .background:hover ~ .over {
   transform: translateX(-200px);
   transition: all 0.3s ease-in-out 0s;
}

For more information on CSS selectors, this is a great and informative article

