It's it possible today to do a transparent color overlay process on a single div? for example if I have the following HTML code
<div class="flower">
</div>
and I have the following html...
.flower {
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.flower:after {
background:#FF2400; opacity:0;
}
.flower:after:hover {
opacity:0.7;
}
So when someone hovers over this, they see a tinted red flower. Can we do something like this today with a single div?
There are at least 2 methods of doing this.
Method 1.
Overlay the whole div.
NB.This will also affect any content that may be inside the div.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.overlay {
position: relative;
background: url(http://lorempixel.com/output/nature-q-c-200-200-4.jpg);
}
.overlay:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 1);
opacity: 0;
}
.overlay:hover:after {
opacity: .5;
}
<div class="box overlay">
</div>
Method 2.
Since you are using a background image, we can add another background image on top of the first by way of a linear gradient with a single color and RGBA properties.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.bgimage {
background: url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
.bgimage:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
<div class="box bgimage">
</div>
This has the advantage of not affecting the content of the div.
I'm sure there are other methods but these are the first two that came to mind.
Related
This syntax in a css background property works well:
.my-element {
background:
linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.8) ),
url('img/background.jpg')
}
I don't need a gradient though. I'd like the overlay to be from one color with some level of opacity. I know I could just have the starting color the same as the end color of a gradient but is it possible to replace 'linear-gradient' with just rgba color including opacity?. It does not seem to work.
EDIT: I might have not been clear in my question. What I'd like is:
.my-element {
background:
color(rgba(131,131,131,0.8),
url('img/background.jpg')
}
The above does not work. I can't use the hex notation for the color either as it does not include opacity.
You have two possibilities.
Either consider a CSS variables to optimize the code and avoid repeating the color twice:
.box {
--c:rgba(131,131,131,0.8);
height:300px;
width:300px;
background:
linear-gradient(var(--c),var(--c)),
url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover;
}
<div class="box"></div>
Or use blending but you may not have the exact same result and you need to adjust the value of the blending based on the color used:
.box {
height:300px;
width:300px;
background:
url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover,
rgba(131,131,131,0.8);
background-blend-mode: exclusion;
}
<div class="box"></div>
Add an absolute overlay color:
<div class="my-element"><div class="overlay"></div>My element color</div>
And CSS:
.my-element {
background: url('img/background.jpg')
position: relavive;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(200, 200, 200, 0.8);
pointer-events: none;
}
.my-element {
background: url('img/background.jpg')
position: relavive;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(200, 200, 200, 0.8);
pointer-events: none;
}
<div class="my-element"><div class="overlay"></div>My element color</div>
Did you want something like that?
.my-element {
background: linear-gradient(#e66465, #9198e5),
url('img/background.jpg')
}
.my-element2 {
background:
linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.1) ),
url('img/background.jpg')
}
<div class="my-element">My element color</div>
<br>
<div class="my-element2">My element color</div>
I have found an image that I want to colour. Can I change the colour of the image without having to edit it in an application such as Photoshop. For example.
background-image: url('texture.png');
background-color: blue;
And then use this for multiple sections but changing the colour each time?
Just wondering if this is possible and if somebody can tell me how to do it.
A couple of options (or three).
Background Image with Overlay gradient
div {
height: 100px;
margin: 1em auto;
color: white;
}
.bg-gradient {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
<div class="bg-gradient"></div>
Pseudo-element with bg image and CSS filters
MDN Reference
div {
height: 100px;
margin: 10px auto;
color:white;
}
.pseudo {
position: relative;
background: #000;
}
.pseudo:before {
content: '';
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background:url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
.pseudo.blue {
-webkit-filter:sepia(1) hue-rotate(90deg);
filter:sepia(1) hue-rotate(90deg);
}
.pseudo.purple {
-webkit-filter:sepia(1) hue-rotate(270deg);
filter:sepia(1) hue-rotate(270deg);
}
<div class="pseudo blue">Text</div>
<div class="pseudo purple">Text</div>
Background Blend Mode
MDN Reference
div {
height: 100px;
margin: 1em auto;
color: white;
}
.blend {
background-image: url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-color: #663399;
background-blend-mode: multiply;
background-size: 100% auto;
}
<div class="blend"></div>
I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.
What I get now is:
page-heading {
background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way?
Use a simple box-shadow inset:
.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}
JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/
I see that a lot of people here create an extra element or pseudo elements, but you don't need two elements to create this effect. You can simply declare two background-images. One of which is the original image, and the other a linear gradient. See this Fiddle to see the effect working.
background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");
Note that you first have to declare the gradient and then the image (I always get this wrong the first time I try to make this)
You can do this with a gradient like the fiddle below.
The left is the original image. The right is the one with the gradient applied.
.block {
width: 300px;
height: 300px;
display: inline-block;
}
.og {
background: url(http://placehold.it/300x300);
}
.ed {
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}
<div class="block og"></div>
<div class="block ed"></div>
Use a pseudo element...
.page-heading {
background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
.page-heading:before {
content: "";
background: rgba(36, 70, 105, 0.74);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="page-heading">
</div>
You can use a pseudo-element to place over your . This way you won't use an extra DOM element.
.element {
background: url('http://lorempixel.com/500/500/');
height: 500px;
width: 500px;
position: relative;
}
.element:after {
background: rgba(0,0,0,0.8);
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
JSFiddle here: http://jsfiddle.net/volzy/LLfhm0kc/1/
body{
background-color: #ccc;
margin:0px;
}
.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;
}
I use body but the element could be something else
Hi, here a fiddle :
http://jsfiddle.net/5f46znzx/
is what you are looking for?
remember that opacity trasform each element with the opacity set.
i suggest to eliminate it if you dont need that internal element takes opacity.
You need another box above the header. Imagine that's your HTML:
<div class="page-heading">
<div class="page-heading-fake">
</div>
</div>
You can have this CSS
.page-heading {
background: url(yourimg.png);
position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
position: absolute;
top: 0;
left: 0;
background-color: rgba(36, 70, 105, 0.74) ;
}
I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.
I think using a background gradient with a hard transition is a very clean solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Here are the examples in action: http://jsbin.com/iqemot/1/edit
You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
JSFiddle
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
JSFiddle
Resources:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Using jQuery how to get click coordinates on the target element
This method words on different sized windows and fills the screen. Even works on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by #timlg07
.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Method 1:
<div class="triangle"></div>
body {
margin: 0;
}
.triangle {
background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
height: 100vh;
}
https://codepen.io/x-x00102/pen/ZEyEJyM
Method 2:
<div class="triangle"></div>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.triangle::after {
content: '';
position: absolute;
border-top: 100vh solid LightGray;
border-right: 100vw solid Salmon;
}
https://codepen.io/x-x00102/pen/VwWwWGR
Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.
The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).
/* Cruft for the demo */
body {
margin: 0;
padding: 0;
}
.gray-block {
background-image: linear-gradient(to bottom right, #000, #ccc);
color: #fff;
}
.gray-block__inner {
padding: 20px;
}
/* The actual solution */
.diagonal-end::after {
content: "";
display: block;
margin-top: -6vw; /* optionally move the diagonal line up half of its height */
border-top: 12vw solid transparent; /* change 12vw to desired angle */
border-bottom: 0px solid transparent;
border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
<div class="gray-block__inner">
<span>Some content</span>
</div>
</div>
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>