html - Is there any way to exclude a single element from the style? (Bootstrap) -
so, have img
logo, overlaid on div
styled background-image: url("...")
, , both elements inside 2 div
classes .to-color
, .to-overlay
respectively, black transparent overlay.
is there way exclude logo style given these 2 classes?
here's jsfiddle example: link
html , css example:
- html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center; background-size: cover; padding-top: 10%; padding-bottom: 20%; }
what you're doing wrong making .to-overlay
, of children half-opaque.
instead of making .to-overlay
half-opaque, use pseudo-element appear before logo , make half-opaque.
.to-color { background-color: #000; position: relative; } .to-overlay:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
here's example: https://jsfiddle.net/qet75juc/2/
Comments
Post a Comment