Here’s a little bit of CSS to create a cool “see-through” effect, which is particularly fun when using fixed-position background images.
Try scrolling me!
[CodePen height=500 show=result href=EryCo user=mickeykay ]
Considerations
This method utilizes the :after pseudo-element, which doesn’t work so well on inputs, but if you want to apply the same effect to form elements you can just create a lighter/translucent version of the same background image and apply it to the <input>‘s. Anybody have a way to do this without creating a second image? We’d love to hear about it.
