As you can see here:
http://clients.noxxie.nl/rashosting/
I am using overlay in the image lighter black background.
but the text is also in overlay and that is not to happen.
Does anybody now how to fix it?
Your .text container has an opacity of 0.5 and is being inherited by its sibling content. You can fix it by using an rgba color on the container instead of opacity (though there is sparse support in IE (IE9 and above i believe) like so:
.text {
background-color: rgba(0, 0, 0, 0.5);
}
Or you can use a 1x1 semi-transparent png image as a background on that container. Another method would be to create an overlay div, absolutely positioned to cover the .text container with the opacity and a z-index low enough to stay behind everything else. Something like this:
HTML
<div class="overlay"> </div>
You can place the .overlay div inside of your .text container right at the bottom of the div.
CSS
.text {
position:relative;
z-index:10;
}
.overlay {
position:absolute;
top:0; right:0; bottom:0; left:0;
background-color:black;
opacity:0.5
z-index:1;
}
Related
if you pass your mouse over the image on this jsfiddle, it does not overlap the text around it.
pretty dumb question, but i am very confused, could someone help me?
http://jsfiddle.net/wdhf2/
the image has this css:
.img {
height:30px;
-webkit-transition-duration:0.5s;
transition-duration:0.5s;
margin-bottom:0px;
margin-right:0px;
z-index:100000000;
}
.img:hover {
height:300px;
margin-bottom:-270px;
margin-right:-270px;
}
z-index can be applied only to positioned elements. Here's a fiddle with an image covering all the text after it has been positioned absolutely: http://jsfiddle.net/hb8f2/. Using position: relative or position: fixed also allows application of z-index.
.img {
position: absolute;
}
Using Raphaël—JavaScript Library at This Demo I am trying to draw on the top of Two divs (#layer1 and #layer2) which they have image background. But As you can see the drawing object (Red Circle) is sitting at the back of other images (The reason of that is visible is using PNG image for layers).
Can you please let me know how I can reorder them and change the zindex of the elements to ring the drawing object to the first on the top?
#layer1 {
top:0px;
position:absolute;
width:794px;
height:680px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che2_zps88cdd50e.png');
background-repeat: no-repeat;
z-index:100;
}
#layer2 {
top:0px;
position:absolute;
width:794px;
height:680px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che_zps3fa0eafd.png');
background-repeat: no-repeat;
z-index:10;
}
#canvas {
z-index:500;
}
There's a couple of bits to possibly change... fiddle here
For the z-index to take effect, you need to add
position: absolute;
to the css for that element;
I've also put the background-color onto the first divs style, so it doesn't hide the other picture, or you could possibly add opacity to that or something instead.
Please take a look at this link, http://codepen.io/funhyun/pen/eLmFp .
I am trying to achieve a css3 hover animation effect where upon hovering the thumbnail, the black color overlays with the carot to click animates in. At the moment, when you hover the image, nothing happens. However, if you remove the IMG tag on line 3 of the html code, then it works. How can I make it animate with the image? Any help is greatly appreciated!!
Its working but the overlay is moved below the image.
If you remove overflow: hidden of #box, you can see it working.
you need to give position: absolute to the overlay.
check this
I have used your same code of your's.
Your problem is, that your overlay div isn't over the image, it's under it.
Solved by removing the image tag and adding the image as background-image to #box, see here
Hope i could help :)
You can use this css. it will work fine
#box { width:300px;
height:200px;
margin:5% auto 0 auto;
overflow:hidden;
position:relative;
background: #ccc;}
#overlay { background:#333;
text-align:center;
padding:45px 0 66px 0;
opacity:0;
position:absolute;
top:0px;
right:0px;
left:0px;
-webkit-transition: opacity .25s ease;}
I'm having some problems with getting the right opacities for .div1. I can only make it a lower opacity than the .container or the same but I want it to be higher I want to get it to 1 instead of 0.92. Can anybody help me figure out how to get it .div1 to opacity lvl 1?
html:
<div class="container">
<div class="div1">sth1</div>
<div class="div2">sth2</div>
</div>
css:
.container {
position: fixed;
width: 100%;
height: 100%;
background-color:black;
opacity: 0.92;
}
.div1 {
background-color: white;
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
opacity: 1.0;
}
Opacity values are not inherited. Rather, they stack. So if you make .container have opacity 0.92, and don't change any other opacities, the CSS opacity of the child elements div1 and div2 will be 1 by default. Yet those child elements will look like they have 0.92 opacity, visually, because they're inside container. If you change div1's opacity property to 0.5, then its visual opacity will be 0.92 * 0.5 = 0.46.
Thus, you can't have a child element be more opaque than its parent. A child element will always look at least as transparent as its parent.
To solve this, you could try to move the child element out of the parent. You could use absolute positioning to position it over the parent so it looks like it is inside. Alternatively, if the only reason you want opacity is to make the parent's background color transparent, you could specify a transparent color using rgba():
.container {
background-color: rgba(0, 0, 0, 0.92); /* transparent black */
}
I have a menu div and below is content div. When I add box-shadow to content div, it will paint over menu div and it doesn't look good. I would like to see box-shadow being painted behind menu div.
Is there way how to achieve it?
Using z-index you can position the "layering" of your elements:
.menu
{
z-index:1;
position: relative;
}
.content
{
z-index:0;
position: relative;
}