opacity

I want apply opacity for parent but I do not want the child element to inherit this opacity. <div class="parent"> <div class="child"></div> </div> .parent { opacity: 0.6; } Is there a way to "cancel" the inherited opacity? maybe force it to opacity=1 for the child element? Yi Jiang The opacity of the child will always be the opacity of the parent if the opacity of the child is 1. This is not a problem with inheritance, but rather with the way opacity is calculated. For instance, <div id="parent"> <div></div> </div> <div id="original"> </div> <div id="quarter"> </div> #parent div, #quarter {

I am trying to achieve something like this: When I hover over an image, I would like to put on that image this dark color with some text and the icon. I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same. How can this effect be achieved? You can achieve this with this simple CSS/HTML: .image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image

There seems to be an issue with my page here: http://www.lonewulf.eu When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome. My css: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; display:block; border:1px solid #121212; } .img:hover{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; display:block; } alpipego Another solution would be to use -webkit

I know you can do this with a UIImageView, but can it be done to a UIImage? I want to have the animation images array property of a UIImageView to be an array of the same image but with different opacities. Thoughts? I just needed to do this, but thought Steven's solution would be slow. This should hopefully use graphics HW. Create a category on UIImage: - (UIImage *)imageByApplyingAlpha:(CGFloat) alpha { UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGRect area = CGRectMake(0, 0, self.size.width, self.size.height);

I want to set Opacity of div's background without affecting contained element in IE 8. have a any solution and don't answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color admin can change that I used that but not working in IE 8 #alpha { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } and rgba(0,0,0,0.3) also. The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead. The CSS is fairly simple: .myelement { background: rgba(200

This question already has an answer here: How do I give text or an image a transparent background using CSS? 28 answers I am using something similar to the following code: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead they both have an opacity of 0.4. AlienWebguy Children inherit opacity. It'd be weird and inconvenient if they didn't. You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for

Is there a straight forward CSS way to make the border of an element semi-transparent with something like : border-opacity:0.7; ? If not, does anyone have an idea how I could do so without using images? Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera