I've got a strange one. I use this same bit of code all over my site, and it works everywhere. For some reason, it simply wont work here.
Basically what I am doing is creating a translucent background image by using pseudo elements :before and :afterto fill the entire container with a background color (:before) and a semi-transparent image (:after). The :before element works just fine, it fills the height and width of the .dashboard-page as expected. The :after element has 100% width, but a height of 0, so the image is not showing up. Help would be much appreciated.
.dashboard-page {
width: 100%;
position: relative;
z-index: 1;
#include clearfix;
&:before,
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
#include transition($transition-main);
}
&:before {
z-index: -2;
background-color: $blue-light;
}
&:after {
opacity: 0.02;
z-index: -1;
background-image: url('../life/assets/img/pattern.png');
}
}
Try adding display: block; to :after.
By default pseudo elements are inline boxes
Related
I have a problem. In Firefox - Pseudo element with position: fixed in tag button not cover that button.
Example
<button class='test'>lalal</button>
.test {
position: relative;
}
.test::after {
content: '';
position: fixed;
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
https://jsfiddle.net/xt9eLb8z/4/
Don't use position:fixed use position:absolute.
With position:fixed the element is related to and sized with the viewport and not the parent element.
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
MDN
.test::after {
content: '';
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.test {
position: relative;
}
<button class='test'>lalal</button>
Is there any way to darken a .png image? I have one as a background image, but it does not cover the whole container, if I set overlay to darken it.
.overlay {
background-color: #322D36 ;
bottom: 0;
left: 0;
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
It's also visible outside of the image space. Is there any way how to darken only image?
demo
You could use the (not super supported) filter property like so.
filter: brightness(0.4);
Some prefixes such as -webkit- may be needed.
Here's a fiddle.
EDIT because of comment:
Make the container the width and height of your image, then add the image using the before pseudo class.
.container {
position: relative;
width: ###;
height: ###;
}
.container:before {
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
position: absolute;
z-index: 1;
background-image: some-url;
-webkit-filter: brightness(0.4);
}
.content {
position: relative;
z-index: 10;
}
Put all your text in the .content div.
You can use a linear-gradient to your background.
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");
Updated JSFiddle.
Here another JSFiddle in which you can see that only the background will be dark and the rest of elements will be normal.
you can using background-color after background-image property, and using background-blend-mode property for overlay the background-image. Here is the example
https://codepen.io/anon/pen/PQOejG?editors=1100
An element has the following CSS property:
#mask {
display: none;
background: transparent;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
and another element which is supposed to appear on top of it:
.login-popup {
display:none;
position: fixed;
z-index: 99999;
}
It turns out just fine on FireFox. On Chrome, this #mask is being projected above everything else. Chrome is Version 24.0.1312.70. What could be wrong?
Note: Both the elements are manipulated using JavaScript. The JavaScript does not interfere with the Z-index property in any way.
jsfiddle: http://jsfiddle.net/zbesr/8/
This happens because #mask has opacity less than 1.. New stacking orders apply when you have opacity. Interesting article that describes exactly why this happens:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?
Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .wrapper div:
.dimmed {
position: relative;
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
I'm using rgba here, but of course you can use other transparency methods if you like.
Using CSS3 you don't need to make your own image with the transparency.
Just have a div with the following
position:absolute;
left:0;
background: rgba(255,255,255,.5);
The last parameter in background (.5) is the level of transparency (a higher number is more opaque).
Example Fiddle
.foo {
position : relative;
}
.foo .wrapper {
background-image : url('semi-trans.png');
z-index : 10;
position : absolute;
top : 0;
left : 0;
}
<div class="foo">
<img src="example.png" />
<div class="wrapper"> </div>
</div>
For a div-Element you could just set the opacity via a class to enable or disable the effect.
.mute-all {
opacity: 0.4;
}
Like the answer previous, but I'd put ::before, just for stacking purposes. If you want to include text over the overlay (a common use case), using ::before will should fix that.
.dimmed {
position: relative;
}
.dimmed:before {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
I have this image that I want to display on top of my product images when you HOVER on them.
This is what i'm using:
.centerBoxContentsFeatured img:hover {
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
It does work but it's being display behind the product image instead of on top of it. I tried absolute positioning and z-index but nothing seems to work.
http://www.pazzle.co.uk - trying to apply on the images on the main page. <<
EDIT:
#featuredProducts.centerBoxWrapper {
position: relative;
}
#featuredProducts.centerBoxWrapper:hover:before {
content: '';
width: 187px;
height: 179px;;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
a {
display: block;
position: relative;
width: 100px;
height: 100px;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
Demo
Use a pseudo element.
It's doing exactly what it's supposed to do. It's a background, so it will appear behind the container's content.
What you have to do here is to overlay a div over the image you're hovering.
I think this is possible a with a pure CSS solution, but it might be easier with some JavaScript.
See this question: on hover overlay image in CSS