Assuming an element is at 100% saturation, opacity, etc... how can I have its **background** become slightly lighter when it is hovered?

The use case is that I&#39;m allowing a user to hover over any element on a page. I don&#39;t want to go around determining each colors equivalent at 80% opacity.

One method is to change the `opacity: 0.4` but I only want the background to change.

CSS: lighten an element on hover

What&#39;s wrong? I want to change the opacity if `#nav .drop` is `display:block;`

    jQuery(document).ready(function(){
        if (jQuery(&#39;#nav .drop&#39;).css(&#39;display&#39;) === &#39;block&#39;) {
            jQuery(&#39;#main&#39;).css(&#39;opacity&#39;) = &#39;0.6&#39;;
        }
    });

jQuery CSS Opacity

I was wondering how to change or modify the transparency of a Panel in C#, not the whole form, but the panel only.. I&#39;ve seen many C# tutorials on Opacity, but its for the Form. im looking for how it could be possible with the Panel only. Thank You!

How can I set the opacity or transparency of a Panel in WinForms?

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

Example
=======
All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.


HTML
----
    &lt;div id=&quot;footer&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;  

CSS
---
    #footer ul li {
    	background: url(/images/arrow.png) no-repeat 0 50%;
    }  
  
  
What I&#39;ve Tried
===============

I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn&#39;t seem to be a way to reset the opacity of child elements:

    #footer ul li {
    	background: url(/images/arrow.png) no-repeat 0 50%;
        /* will also set the opacity of the link text */        
        opacity: 0.5;
    }

I also tried using rgba, but that doesn&#39;t have any effect on the background image:
 
    #footer ul li {
        /* rgba doesn&#39;t apply to the background image */
        background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
    }


Set opacity of background image without affecting child elements

I have a button as in the following:


    &lt;Button 
         android:text=&quot;Submit&quot; 
         android:id=&quot;@+id/Button01&quot; 
         android:layout_width=&quot;fill_parent&quot; 
         android:layout_height=&quot;wrap_content&quot;&gt;
    &lt;/Button&gt;


In my `onCreate()` event, I am calling Button01 like this:

    setContentView(R.layout.main);
    
    View Button01 = this.findViewById(R.id.Button01);
    Button01.setOnClickListener(this);
        

There is a background in the application, and I want to set an opacity on this submit button. How can I set an opacity for this view? Is it something that I can set on the java side, or can I set in the main.xml file?

On the java side I tried `Button01.mutate().SetAlpha(100)`, but it gave me an error.

How to Set Opacity (Alpha) for View in Android

Using the HTML5 `&lt;canvas&gt;` element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don&#39;t know how to change its opacity.

Here&#39;s the code I have so far:

    var canvas = document.getElementById(&#39;myCanvas&#39;);
    	
    if (canvas.getContext)
    {
    	var c			= canvas.getContext(&#39;2d&#39;);
    	c.globalAlpha	= 0;
    	
    	var img		= new Image();
    	img.onload	= function() {
    		c.drawImage(img, 0, 0);
    	}
    	img.src		= &#39;image.jpg&#39;;
    }

Will somebody please point me in the right direction like a property to set or a function to call that will change the opacity?

How to change the opacity (alpha, transparency) of an element in a canvas element?

Can I assign the `opacity` property to the `background` property of a `div` only and not to the text on it?

I&#39;ve tried:

    background: #CCC;
    opacity: 0.6;

but this doesn&#39;t change the opacity.


CSS opacity only to background color, not the text on it?

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this:

    background: lighten(@blue, 20%);

I want to change the alpha opacity of my color, though. Preferably like this:

    background: alpha(@blue, 20%);

Is there a simple way to do this in LESS? 

Modify alpha opacity of LESS variable

I am using something similar to the following code: 

    &lt;div style=&quot;opacity:0.4; background-image:url(...);&quot;&gt;
        &lt;div style=&quot;opacity:1.0;&quot;&gt;
            Text
        &lt;/div&gt;
    &lt;/div&gt;

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. 


CSS Background Opacity

I&#39;m using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action.

This works fine in Firefox and Chrome, but in IE8 the opacity doesn&#39;t change.

I&#39;ve tried a variety of CSS settings without any success.

For example

HTML:

    &lt;h3 class=&quot;slidedownTrigger&quot;&gt;This is the trigger text&lt;/h3&gt;

CSS:

    .slidedownTrigger
    {
        cursor: pointer;
        -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=75)&quot;;
        filter: alpha(opacity=75);
        -khtml-opacity: 0.75;
        -moz-opacity: 0.75;
        opacity: 0.75;
    }

What&#39;s stopping IE changing the opacity? Note: I&#39;ve tried this on a variety of different elements, swapping round the order of the CSS statements, and just using the IE ones on their own. I&#39;ve also tried using

    -ms-filter: &quot;alpha(opacity=75)&quot;;

but with no success. 

I&#39;ve run out of things to try to get opacity modification working in IE8.

Any ideas?

Opacity CSS not working in IE8

I&#39;m very new to HTML/CSS and I&#39;m trying to display some text as like 50% transparent.  So far I have the HTML to display the text with full opacity

    &lt;html&gt;&lt;font color=\&quot;black\&quot; face=\&quot;arial\&quot; size=\&quot;4\&quot;&gt;THIS IS MY TEXT&lt;/font&gt;&lt;/html&gt;

However, I&#39;m not sure how to change its opacity. I&#39;ve tried looking online, but I&#39;m not sure exactly what to do with the code I find.

How to change text transparency in HTML/CSS?

I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the `background-image` darker, and not everything else? 

    background-image:url(&#39;http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png&#39;);

How to darken a background using CSS?

I want to set Opacity of div&#39;s background without affecting contained element in IE 8. have a any solution and don&#39;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.

Opacity of div&#39;s background without affecting contained element in IE 8?

Is it possible, using CSS only, to make the `background` of an element semi-transparent but have the content (text &amp; images) of the element opaque?

I&#39;d like to accomplish this without having the text and the background as two separate elements.

When trying:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;
      &lt;span&gt;Hello world&lt;/span&gt;
    &lt;/p&gt;

&lt;!-- language: lang-css --&gt;

    p {
      position: absolute;
      background-color: green;
      filter: alpha(opacity=60);
      opacity: 0.6;
    }

    span {
      color: white;
      filter: alpha(opacity=100);
      opacity: 1;
    }

&lt;!-- end snippet --&gt;

It looks like child elements are subjected to the opacity of their parents, so `opacity:1` is relative to the `opacity:0.6` of the parent.


How do I give text or an image a transparent background using CSS?

I want to make the list menu&#39;s background disappear by using opacity, without affecting the font. Is it possible with CSS3?

Transparent CSS background color

Can CSS transitions be used to allow a text paragraph to fade-in on page load?

I really like how it looked on [http://dotmailapp.com/][1] and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed [on the Wayback Machine][1].

### Illustration

Having this markup:

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;test&quot;&gt;
        &lt;p&gt;​This is a test&lt;/p&gt;
    &lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

With the following CSS rule:

&lt;!-- language: lang-css --&gt;

    #test p {
        opacity: 0;
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
        -webkit-transition: opacity 2s ease-in;
        -moz-transition: opacity 2s ease-in;
        -o-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
        transition: opacity 2s ease-in;
    }​

How can the transition be triggered on load?

  [1]: http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/




Using CSS for a fade-in effect on page load

Hey i am searching in google but i can&#39;t fine any perfect answer
 
I want to Opacity in parent DIV but not Child  DIV


Example 

**HTML**

    &lt;div class=&quot;parent&quot;&gt;
    &lt;div class=&quot;child&quot;&gt;
    Hello I am child 
    &lt;/div&gt;
    &lt;/div&gt;
**Css**

    .parent{
    background:url(&#39;../images/madu.jpg&#39;) no-repeat 0 0;
    }
    .child{
    Color:black;
    }

**Note: --** I want to **background-image** in `Parent Div` not Color 

How to set opacity in parent div and not affect in child div?

So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code: 

    @charset &quot;utf-8&quot;;
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #42413C;
    	margin: 0;
    	padding: 0;
    	color: #000;
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { 
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;
    	padding-right: 15px;
    	padding-left: 15px;
    	opacity:1;
    }
    a img { 
    	border: none;
    }
    a:link {
    	color: #42413C;
    	text-decoration: underline;
    }
    a:visited {
    	color: #6E6C64;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus {
    	text-decoration: none;
    }
    .container {
    	width: 750px;
    	margin: 0 auto;
    }
    .content {
    	padding:20px;
    	width:710px;
    	position:relative;
    	background:#CCC;
    	opacity: 0.5;
    }
    .fltrt {
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    .header {
    	top:0%;
    	width: 750px;
    	height: 200px;
    	background-image: url(images/header.png);
    	background-repeat:no-repeat;
    	background-position:center;
    }
    .navbar {
    	height: 50px;
    	width: 750px;
    	position: relative;
    	z-index: 2;
    }
    #bg {
    	position: fixed;
    	top: 25%;
    	left: 15%;
    	z-index: -1;
    }
    div {
    display: block;
    }

Here is my website (click the link dont type &quot;tccraft.net&quot; in your url it will take you to a facebook page): http://tccraft.net/index.php
Thank you!

Making text background transparent but not text itself

Is there a straight forward CSS way to make the border of an element semi-transparent with something like this?

    border-opacity: 0.7;

If not, does anyone have an idea how I could do so without using images?

Can you set a border opacity in CSS?

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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;;
    	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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
    	filter:alpha(opacity=100);
    	-moz-opacity: 1; 
    	opacity: 1;
    	-khtml-opacity: 1;	
    	display:block;
    }

image moves on hover - chrome opacity issue

I have three problems:

1. When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?

2. I have a smaller image and I want to use in a bigger div. But don&#39;t want to use repeat function.

3. Is there any way in CSS to manipulate the opacity of an image?

Background images: how to fill whole div if image is small and vice versa

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?

How to set the opacity/alpha of a UIImage?

I am trying to achieve something like this:

![this effect][1]

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&#39;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?


  [1]: http://i.stack.imgur.com/Wtjqz.png

How to make in CSS an overlay over an image?

Currently, I have this code:

    @-webkit-keyframes blinker {
      from { opacity: 1.0; }
      to { opacity: 0.0; }
    }

    .waitingForConnection {
      -webkit-animation-name: blinker;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
      -webkit-animation-duration: 1.7s;
    }

It blinks, but it only blinks in &quot;one direction&quot;. I mean, it only fades out, and then it appears back with `opacity: 1.0`, then again fades out, appears again, and so on...

I would like it to fade out, and then &quot;raise&quot; from this fade back again to `opacity: 1.0`. Is that possible?


How to make blinking/flashing text with CSS 3

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a `div` while the text remains opaque?

I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I&#39;d love to know so I can look at their code).


Opacity of background-color, but not the text

Is there an option to include opacity on the colors you define to be your primary/secondary colors in the sass variables? In the fashion of the lighten($color, amount) function? 



Setting opacity on $primary-color in sass

I want to achieve this using html and css:

![schema][1]


I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn&#39;t work: both divs have 0.3 opacity.

[jsFiddle of my try here][2]

The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).


  [1]: http://i.stack.imgur.com/75KeA.png
  [2]: http://jsfiddle.net/yT6nG/

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

I&#39;m coding a &quot;popup window&quot; in JavaScript and I&#39;ve come across an interesting thing:

![Cropped screenshot demonstrating strange stacking behavior][1]

The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.

CSS `opacity` property of the navy square is `0.3`. From what I&#39;ve tried, it seems that every number from the interval `(0,1)` would yield the same result. If I change it to `1`, then it behaves as expected (i.e. the part of the square under the popup is hidden). 

I&#39;ve tried to set the `z-index` property to `10` for the square and `100` for the popup, but it doesn&#39;t change anything.

What am I missing? Why is part of square displayed?

Tested browsers:

- Firefox 3.6.x
- Chrome 4

  [1]: http://i.stack.imgur.com/gTQyq.png

All Opacity Solutions on Gang of Coders

Total of 28 Opacity Solutions