I'm trying to set up two types of slides in Revolution slider. There will be the main background image for the slide, then a semi-opaque layer taking up 40% of the left side or the right side of the slide, with a text layer above that. I have the following css that can achieve the semi-opaque layer for one side (right or left, in the case below, left side) using the 'after' psuedo selector:
.rev_slider .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}'
This takes care of the one side of the transparency but not the other, so I need a slide-specific class which adds a "left" or "right" property to the parent .slotholder class. Any suggestions?
you can try to use also :before for the right side, please try use this css
.rev_slider .slotholder:after, .rev_slider .slotholder:before{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
.rev_slider .slotholder:before{
right: 0;
}
.rev_slider .slotholder:after{
left: 0;
}
In the "Link & Seo" section, there is a field to add a class to the <li> of the slide - You can add a class (e.g. "right-text", "left-text") and apply the appropriate css rule, e.g.
left-text .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
Related
When my menu opens I have put a greyed out overlay in the body. But it does not affect post images and some meta stuff...
Look https://imgshare.io/image/OyV9d
CSS
.is-menu-toggled-on body {
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
}
How to make the overlay cover everything...?
You can simply make a overlay like this. I am showing you a regular overlay technique. use it for your code.
body {
position: relative;
height: 100vh;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
/*dim the background*/
}
<div class="overlay">hello</div>
I want to create a horizontal line similar to the one found on this post and marked as the solution but only with the shadow appearing at the bottom.
The closest I can get is getting the shadow shown in the middle of the line, both up and down.
Like this?
.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
.fancy-line:before {
top: -0.5em;
height: 1em;
}
.fancy-line:after {
height: 0.5em;
top: calc(-0.5em + 1px); /* adjusted this */
}
.fancy-line:before, .fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
.fancy-line, .fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
}
body, .fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<div class="fancy-line"></div>
The original code generates a radial gradient and covers the bottom half of it with a block colored the same as the background. Adjusting it to your requirements is just a matter of moving the covering piece from the bottom to the top.
Also, note: hr elements are required to be self closing. This precludes the use of :before and :after since self-closing elements can't have children. In the referenced answer, they weren't using any particular feature of hr, so I've converted it to a div here.
Take a look at this: http://jsfiddle.net/9rovqvoj/1/
It's basically the same, but adding a mask before pseudo element :before instead of :after and added a z-index to it.
hr.fancy-line:after {
top: -0.5em;
height: 1em;
}
hr.fancy-line:before {
content: '';
height: 0.5em;
top: -0.5em;
z-index: 999;
}
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
I just trying to put a background color (rgba) with an image, but doesn't work.
My CSS is:
section{
width:100%;
height:400px;
background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}
I just trying to put with diferent positions, like background-image, or just background, but doesn't work.
As I pointed out in comments, background color behaves as a fallback for the background image, unless the image is transparent:
section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}
If you want to cover the image by an overlay layer (using rgba()), you can create a pseudo-element and position that as absolute the use left, top, right and bottom properties to expand the overlay, as follows:
.box {
background: url(http://lorempixel.com/500/500) no-repeat center center;
position: relative;
}
.box:after {
content: ' ';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* Fill the entire space */
background-color: rgba(0,0,0,.4);
}
WORKING DEMO.
Does it have any content?
If so, you can use z-index property to move the overlay beneath the content which is wrapped by a relative positioned <p> element with a higher z-index value, as follows:
<section class="box">
<p>Content goes here...</p>
</section>
p {
position: relative;
z-index: 2;
}
.box:after {
content: ' ';
position: absolute;
z-index: 1;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,.4);
}
UPDATED DEMO.
Use transparent PNG as a background image and then you can see both color and image together.
section {
width:100%;
height:400px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}
You can use rgba within the same declaration
DEMO http://jsfiddle.net/b6vzN/1/
background:url(../img/background2.jpg) no-repeat rgba(0,0,0,0.5);
If you wish to assign it seperately as in your example then you need to specify background-image, not just background
background-image: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
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);
}