I was wondering if there's any way to make a child more transparent than it's parent. I need to make a div show through more than the div it's contained in, any way to achieve this with CSS?
This is what I'm aiming for: I have a background with 0.6 opacity, the element on the left has 0.8, so it's darker, but I need the one on the right to be more transparent. Setting less alpha to it than the parent doesn't work, it just matches its parent.
It can't be done using CSS 2, but can be done using CSS 3 http://www.css3.info/introduction-opacity-rgba/
If you used rgba for backgournd-color for the parent, inside elements will not get opacity.
If you don't want to use css3, you have no way except putting the child outside the parent and play with positions.
Depending on what your situation is, you could try any of the following:
Give the child position:absolute and use CSS to move it to the location you want in front of the parent div.
Convert either the child or the parent into an image, then use opacity on the other as necessary.
Use CSS 3: http://www.css3.info/preview/opacity/
Compatibility of the CSS 3 technique in various browsers: http://caniuse.com/css-opacity
Related
Jsfiddle
So as seen in the Jsfiddle (You may need to hold ctrl + a) I'm trying to achieve having the div on top of the image, but I tried using a z-index for both the div and the image, and even put the image in a div by itself, but it still hasn't worked.
I was wondering if this is possible in CSS.
The reason is that by default elements are positions statically which means that z-indexes do not apply. Change to a different position such as relative or absolute will make z-index apply.
https://developer.mozilla.org/en/docs/Web/CSS/position#Values
Only using CSS2 i want to change background color of parent on mouse over of its child element can any body help me out. "I'am using div as parent and span as child on mouse over of child span i want to make parent div background color change"
well.... not really but you can make it look like. selectors always go the direction from parent to child. but you can try something using position: absolute of a background-simulating element inside the child element
http://jsfiddle.net/Kq4JJ/
edit note: this highly depends on the rest of your css! no element between the parent that should have the background and the hovering child (including itself) must have position, no matter if relative or absolute. otherwise the background will only cover that element.
I have a multiple Vboxes/Hboxes inside a parent Vbox. I have hide/show effects for the parent container, but I want to know if there is a way to make some of the children ignore this affect that they receive from their parent container.
There's none. The DisplayList is an hierarchical structure, and every leaf object is displayed by using all the parameters from parent objects, including visibility, rotation and more. You may, however, enumerate children in your Vbox/Hbox to undergo the effect, and select (and manually apply) the desired effect only to those that should be hidden. Note that your Vbox/Hbox's visibility should remain true, and opacity at original value, should you use fade in/out effect, otherwise those children of your Vbox/Hbox will too get altered.
You can workaround by adding extra layer.
Then parent would have layers:
New layer with parent background (apply effect here)
your child (effect isn't applied as its parent has no effect)
Hope that helps.
With position: absolute, you place an element by defining one of it's corners (often using the top and left properties). Is it possible to place it by defining it's center? (without knowing it's width/height?).
I have answered a similar question with this jsFiddle link
Link to the similar question with my answer: Position the center of an image using css
You can then use top/left coordinates using pixels, and it will use the center of your object no matter which width/height and this may be dynamic fit to content. One problem may be you need to set some z-indexes and styles so the other wrapper divs won't bother the rest of your content, this may be a drawback to use this approach.
The solution lies in the fact to use a wrapper div, with the real positions, and within that another wrapper div containing styles: position: relative;padding-top: 25%;margin-top: -100%;margin-left: -100%;. The margin-left style will apply easily, but the margin-top needs the padding, hence the extra wrapper div.
If you want another approach, you will have to use Javascript I suppose.
I'm hiding an inline-block element inside of a parent div with overflow:hidden. I am then offsetting the original child element using the left property (negative), so it is hidden. I can make it reveal itself back into the parent using CSS3 transitions, but I'm having to give that negative offset a fairly large number (the width of the parent div), making the timing depend on how much text there is. I need it to be perfect (for reasons not explained here). It would be perfect if the left value always matched the width value of the inline-block element.
Is there any way to find the width of an inline-block element and apply that value to its left offset in CSS3?
I have a feeling I'm going to have to use jQuery, I'm just hoping someone here might have a wonderful solution. :)
Example here:
http://jsfiddle.net/RD7Yv/1/
try left:-100%, This should work.
EDIT:
fiddle
If you just want to "reveal itself back into the parent using CSS3 transitions", it seems like it would be easier to not move the element at all and just animate it's visibility in place. For example, here's animating it's opacity:
http://jsfiddle.net/jfriend00/BqmQK/
All, we use JS for is to add/remove a class from the element and CSS3 does an opacity animation for us. This way the element can be left it it's original position and we don't have to do any size or position calculations.
This same animation can even be done with no javascript if it is triggered by hover.
If you want to see the image sliding into place, then you can set it's initial position to:
left: -100%;
and animate it to:
left: 0;
You can see that working here: http://jsfiddle.net/jfriend00/P2H4Z/