Hey i have this div that shows as a popup:
<div class="popup">
</div>
Then with jquery i add another class to it to give it with the css associated to that class, position, size, color and transparency:
.show {
position: absolute;
color: #F4F5F6;
width: 600px;
margin-left: -300px;
height:300px;
background: #000000;
left:50%;
top:200px;
filter:alpha(opacity=95);
-moz-opacity: 0.95;
opacity: 0.95;
}
My problem is this:
I'm adding text and image to the div.
ending up like:
<div class="popup show">
<div class="image">
<img scr="blabla.png">
</div>
<div class="text">
ble ble ble
</div>
</div>
My problem is the following, even though i have overriden the opacity here:
div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
The image still apears with transparency.
Is there anyway to override the opacity values without having to put the image div outside of the popup div?
Since the '.show' class has an opacity of 95%, so will all of its descendants. It's unfortunate, but that's how opacity works. The descendants cannot overcome their ancestor's opacity as long as they still truly remain descendants.
You'll have to either set the '.show' background with a semi-transparent png or result to some awkward html (see: Non-Transparent Elements Inside Transparent Elements)
Not trying to be jerky, but this Google search (or something similar) might help
Try this:
div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100) !important;
-moz-opacity: 1 !important;
opacity: 1 !important;
}
http://www.w3.org/TR/CSS2/cascade.html#important-rules
EDIT: sorry; I've even come across this before and didn't twig. I think that the nested element's maximum opacity is the same as the outer element's opacity; you can never get more opaque than your parent element! Last I checked this is a proper CSS issue, and I don't know a workaround.
As a workaround, you could try not making nested, but use some ucnning positioning trickery.
Related
I am using Raphael 2.1.0 (raphaeljs.com) with no problem. Actually I'm drawing elements upon a <div> with opacity: 0.6;. It is obvious that the Raphael elements get the same opacity.
I was wondering if there was any way to render opaque elements (100%) upon a transparent paper (60%).
Here is a JSFiddle to illustrate my thing.
What I thought at first was putting a layer without background right above my transparent <div>, which would be my paper. That way, it could give its opacity (100%) to my Raphael elements.
But I'm thinking I am missing an easier way.
From your fiddle, I can see that you have an outer div called #overlay and a div inside that called #paper. You are rendering your paper inside #paper and applying background:white; opacity:0.6; style to #paper itself.
As mentioned in comments in your question, using background-color: rgba(255,255,255,0.6); instead of opacity is an option. But that will not work IE 8 and below and alos on some older versions of other browsers.
A much more semantic way to do it would be to insert a new div with same height as the #paper before #paper and then apply a negative margin to #paper to bring it above the newly inserted div.
<div id="overlay">
<div id="paperbg"></div>
<div id="paper"></div>
</div>
And your CSS would go like
#overlay {
background: #88bb00;
height: 400px;
padding: 10px;
width: 200px;
}
#paper {
height: 400px;
width: 200px;
margin-top: -400px;
}
#paperbg {
width: 200px;
height: 400px;
background: white;
filter: alpha(opacity=60);
opacity: 0.6;
}
Updated Fiddle: http://jsfiddle.net/shamasis/AFTQV/8/
I wanted to add an overlay to an image if they hovered over the image.
I have tried plenty of ways but the image just seems to disappear or stay the same.
This is what it will be like
<a id="icon"
style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
href="page.php?pageid=123" title="Icon">
</a>
Really and truly, what I am after is a quick way to have the image change without having to make more images.
So when not hovering over the image - Original image
When hovering over the image - 40% color overlay?
Thanks in advanced.
What I tried:
a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
}
I created a little fiddle that has this doesn't overlay, but gives the same effect using just CSS. Plus, I threw in some CSS transitions for fun. Basically creating a div behind the image that is revealed via pseudo element hover. This way you can drop in your tags still without needing to create CSS background images like crazy. Just swap out the alpha stuff to make the overlay work the other way.
http://jsfiddle.net/wesleyterry/jwXvA/#base
Hope that is what you were looking for.
Basically, if it's an overlay you can assume the height and width is probably going to be the same.
in this demo i accidentally used images sized 25. change to 23
http://jsfiddle.net/raU2J/7/
<div class="overlay_wrapper">
<div class="overlay"></div>
<img src="cake.jpg" />
</div>
.overlay,
.overlay_wrapper a,
.overlay_wrapper {
width: 25px;
height: 25px;
position: relative;
}
.overlay_wrapper a {
position: absolute;
z-index: 10;
display: block;
}
.overlay {
display: none;
background: red;
position: absolute;
top: 0;
left: 0;
filter: Alpha(Opacity=40, Style=0);
-moz-opacity: 40%;
opacity: 0.4;
z-index: 9;
}
jquery:
$(".overlay_wrapper").hover(
function () {
$(this).find('.overlay').fadeIn();
},
function () {
$(this).find('.overlay').fadeOut();
}
);
This is not possible with just the single <a>, but you can put the <a> in a container (a span or a div). Give the container the desired background, and give a:hover a background color like rgba(255, 255, 255,.4).
If that doesn't work like you want, explain more about your requirements.
The sample demo:
html
<div class="img"><div class="overlap"></div></div>
css
.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */ -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}
I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.
I know how to apply transparency to background colours and block level elements but can you do this for a background image?
Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.
The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.
Here's a sample of how this approach would work:
#container {
width: 200px;
postiion: relative;
}
#semitrans {
width: 100%; height: 100px;
background: #f00;
opacity: 0.6;
filter:alpha(opacity=60);
}
#hello {
width: 100%; height: 100px;
position: absolute;
top: 20px; left: 20px;
}
<div id="container">
<div id="semitrans"></div>
<p id="hello">Hello World</p>
</div>
No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.
You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!
IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.
Ok, so in my page I am showing a background image with this css:
.heroarea {
background:url(/static/images/mrd_hero_01.jpg) no-repeat;
height:450px;
}
and the copy placed over it and the container the copy is in have these styles:
.main-panel {
position: absolute;
top: 130px;
left: 380px;
background: #fff;
width: 560px;
height: 340px;
padding: 30px 30px 20px 30px;
/* CSS3 standard */
opacity:0.5;
/* for IE */
filter:alpha(opacity=50);
}
.main-panel h1 {
background: transparent;
color:#39372f;
text-align: center;
/* CSS3 standard */
opacity:1;
/* for IE */
filter:alpha(opacity=100);
}
Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?
Thanks!
Opacity applies to the element, not it's background.
You either need to use a translucent image, or an rgba background colour.
There is an explanation about how to do this in a backwards compatible way. (Disclosure: My site)
Use rgba and/or transparent png. Alternatively, move the content to a separate sibling div as the background:
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
If you use transparency on a block element it makes the child element inside transparent as well.This is how css works ! I do not think there is any way to hack out of it. What you can do it to absolutely position h1 without making it a child or use a translucent image
It looks like your text is a child of .main-panel. It will take on 50% opacity. Even though you state the text is opacity 100% will only make it 100% of 50%. You will need to layer it outside of .main-panel and place it on top.
You have to move it outside of its .main-panel parent. There's no way to override the 50% opacity that's being applied there.
Alternatively, if you're only using 50% opacity to make the mrd_hero_01.jpg background image transparent, you could convert it to a .png with 50% opacity and then you wouldn't need to set the opacity on .main-panel.
Is it possible to remove the opacity inheritance from a parent to it's child div?
Example
<style type="text/css">
.parent {
opacity:.5;
}
.parent div {
opacity:1; /* I want this to override the ".5", but instead it combines */
}
</style>
<div class="parent"><div></div></div>
Like fmsf says, it's not possible.
If you're looking for a way to make background-color or color transparent, you could try rgba. This is not supported in IE6.
#my_element {
/* ie6 fallback - no opacity */
background-color:rgb(255, 255, 255);
/* rgba(red, green, blue, alpha); */
background-color:rgba(255,255,255,0.5);
}
No, not strictly in the sense you're inquiring about. Because what's happening is not really that the value is inherited in any traditional sense, but the child control is part transparent as a direct effect of being within a partly transparent container.
You can work around it, tho, in a lot of situations.
So this won't work:
<div id="parent" style="opacity: 0.5; background-color: red;">
<div id="child" style="opacity: 1"> Still just 50% visible </div>
</div>
But you could do something like this:
<div id="wrapper" style="position: relative;">
<div id="parent" style="position: absolute; top: 0; left: 0; opacity: 0.5; background-color: red; width: 100%;"> </div>
<div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>
There are a handful of caveats, but this is the only good way to achieve what you want.
In this example I'm dealing with one line of text, and in the "parent" I'm including an which will also occupy one line in height. If your "child" is of a greater height, the "parent" will not grow, because it is really not a parent at all. You'll have to manually set a height.
You'll also manually have to specify width, as you're dealing with absolutely positioned elements.
I'll say, tho, before people start saying that absolute positioning is such a terrible way to solve design problems, that there is one occasion where I think it is perfectly legit: when also dealing with position: relative as in the above example, and to absolutely position an element based on that, and not on the entire window.
No you can't
Opacity is completly inherited from the fathers div.
meaning:
#father{
opacity: 0.5;
}
#child{
opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}
Edit:
If you want to cheat it but retaining the "workflow" of your transparent father. You can put a copy (in size and position) of the father div, on top of the father.
#father, #copy{
your css here
opacity: 0.5;
}
#copy{
opacity: 1;
background: transparent;
z-index: 1000; /* or one more than the father */
}
Now instead of putting your non transparent HTML on the father, put it on the copy.
Create a transparent PNG and apply it as the background of the parent class instead of using opacity.
For a demo, see Twitter's layout (specifically the background/border around the main content).
You can avoid the parent-child opacity inheritance but it will be hacky:
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
There is also a plugin to do the job, called: thatsNotYoChild.js.
With HTML5 you can also use RGBA to set a background color whose transparency (alpha) is not inherited.
Example:
/* Black with 75% transparency */
background-color: rgba(0, 0, 0, 0.25);