Question

This might be silly or very easy to do, but I have no clue how to change text position, not affecting hover effect (it’s width is exact size as it’s parent div/transparent block). For better understanding here’s example image.

1. On hover, red par is set in action.
2. Blue block is content going on top, so that red bar disapears under it, but having 100%, it’s now shows on both side of
   transparent block.
3. Finally, yellow block is place where the
   navigation needs to be placed (again, hover state doesn’t changes)

Really, I’m out of ideas, or to be more precise, without any idea on how to do it. Is it even possible with css?

Answer 1

If I understand you correctly I recommend using padding-left css property. It does not change you hover and if you set the padding as a sum of width of the blue rectangle + width of its right overflowing part, you get your text where you want to.

Set padding-left to he red rectangle.