Web App Development

jQuery translucent box plugin

I need to add a translucent box on top of a picture quite regularly. Unfortunately the CSS opacity property makes the full content of the div translucent which makes text hard to read. So I made a jQuery translucent box plugin that takes care of it and also uses "-ms-filter: alpha" in Internet Explorer.

It uses an absolutely positioned background div that is the same size as the content box. The downside of this is that if the content changes size the background div stays the same - so it's not really useful for dynamic content at the moment. It also sets the z-index property of the content box to one, which could cause problems if other divs also use z-index.


Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test