html - Basic CSS - how to overlay a DIV with semi-transparent DIV on top -
i'm struggling make render right in browser (chrome). have wrapper holding elements of html, , want have div (lets call div-1) hold image, , has overlay div on top of left, sketched in picture...any quick solutions?
here's pure css solution, similar darkbee's answer, without need .wrapper
div:
.dimmed { position: relative; } .dimmed:after { content: " "; z-index: 10; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); }
i'm using rgba here, of course can use other transparency methods if like.
Comments
Post a Comment