CSS: lighten an element on hover

It’s a long time ago but you can do something like this: .element { background-color: red; } .element:hover { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); } You can change the 100px into a number you want. I took a large one to cover the whole element. It isn’t a very beautiful … Read more

How to apply an opacity without affecting a child element with html/css?

You can use opacity in combination with background color, like this: #container { border: solid gold 1px; width: 400px; height: 200px; background:rgba(56,255,255,0.1); } #box { border: solid silver 1px; margin: 10px; width: 300px; height: 100px; background:rgba(205,206,255,0.1); } <div id=”container”> containter text <div id=”box”> box text </div> </div> ​Live demo

How to make in CSS an overlay over an image?

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-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } HTML <div class=”image-container”> <img src=”http://lorempixel.com/300/200″ /> <div class=”after”>This is … Read more

How to set the opacity/alpha of a UIImage?

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); CGContextScaleCTM(ctx, 1, -1); CGContextTranslateCTM(ctx, 0, -area.size.height); CGContextSetBlendMode(ctx, kCGBlendModeMultiply); CGContextSetAlpha(ctx, alpha); CGContextDrawImage(ctx, area, … Read more

image moves on hover – chrome opacity issue

Another solution would be to use -webkit-backface-visibility: hidden; on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow’s has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes. See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

Making text background transparent but not text itself

Don’t use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this. .content { padding:20px; width:710px; position:relative; background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */ background: rgba(204, 204, 204, 0.5); } See http://css-tricks.com/rgba-browser-support/ for more info and … Read more