Advanced Search

Stop CSS Opacity From Affecting Child Elements

/ Published in: CSS
Save to your folder(s)
By default, applying opacity to an HTML element will make all of it's child elements (the content inside of the object) to also get the opacity style applied to it. Here's a clever example of how to override that rendering output in browsers.

The solution is to create a wrapper and apply absolute positioning to a child element of the wrapper.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #alpha_wrapper {
  2. 	width: 540px;
  3. 	height: 360px;
  4. 	float: left;
  5. 	position: relative;
  6. 	color: #fff;
  7. }
  8.  
  9. 	#alpha_2 {
  10. 		background: transparent url(bicycle.jpg) no-repeat 0 0;
  11. 		width: 540px;
  12. 		height: 440px;
  13. 		float: left;
  14. 		filter: alpha(opacity=30);
  15. 		-moz-opacity: 0.3;
  16. 		-khtml-opacity: 0.3;
  17. 		opacity: 0.3;
  18. 	}
  19.  
  20. 	#text_holder_2 {
  21. 		background: blue;
  22. 		position: absolute;
  23. 		top: 20px;
  24. 		left: 20px;
  25. 		width: 500px;
  26. 	}

URL: http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.