When two opaque elements overlap, the opacities combine. Can I tell CSS to make the overlap a different color? For example, can I have two yellow elements that overlap and turn them orange in the middle?
Currently, you can't via pure CSS. There is a CSS property that emulates Photoshop blending modes mix-blend-mode, which isn't really supported widely yet. Although the blending mode still depends on the elements' colors and you can't specify the color for the overlapping sections.
div {
height: 100px;
mix-blend-mode: multiply;
position: absolute;
width: 200px;
}
.left {
background: cyan;
left: 0;
}
.right {
background: yellow;
left: 150px;
}
<div class="left"></div>
<div class="right"></div>
Purely via css, I think not possible. Please try this answer,
How to make an transparent element overlap other elements?
https://css-tricks.com/equidistant-objects-with-css/
You can give css at runtime via js too or you create a css class with element: first or last as second link suggested.
Related
Is it possible to apply a css blend mode to an element in a different div?
E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I would like to apply a blend to, but it seems to not work perhaps because they are not in the same div, like in the example https://css-tricks.com/basics-css-blend-modes/
I am working in wordpress, so it will be a bit hard to re-structure the HTML in order to put the image and the colored box in the same div.
Does anybody know of a trick I can use to achieve this method?
Thanks in advance!
Use mix-blend-mode.
DEMO:
http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview
There are two ways to use blend-modes:
background-blend-mode: If both the background are in same div, then this property can be used.
mix-blend-mode: When you want to blend background of 2 different elements, then you can use the mix-blend-mode property.
code:
HTML:
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.first,
div.second {
width: 300px;
height: 200px;
position: absolute;
}
div.first {
background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
z-index: 9;
top: 0px;
left: 0px;
}
div.second {
background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 30px;
left: 120px;
}
Here is a trick:
you can add both divs in a single div.
Then in css You can add the two backgrounds for a single div. This way, you can use the background-blend-mode property to blend the two images.
Here's an example: https://jsfiddle.net/4mgt8occ/3/
You can use :after or :before to create another element in the img-div. Then set the background color with rgba(). The 0.2 here is the opacity of the background color. For the text div, you don't have to do anything about it.
div#wrapper::after {
background-color: rgba(216, 223, 228, 0.2);
display: block;
width: 100%;
height: 100%;
content: ' ';
}
Ok so, I have this map:
I need to add a rollover effect to the country names (this could be done with a simple :hover in CSS) but I can't find a good way to select just a portion of the text so if I hover "Europe" it just highlights Europe and not every word.
The image is in a PSD so I have access to the base map + layers. How could I approach this? I was thinking about adding all the text in HTML and style it in CSS (rotating, spacing and such), which would take ages, and it would also be a pain to manage when adapting for different resolutions.
Can you masters suggest anything? Thanks :)
The images for reference (text made red just to show there's something there, this would be the rollover effect):
Here's an idea:
body {
position: relative;
}
img {
width: 100%;
}
.states {
position: absolute;
top: 0;
left: 0;
display: none;
}
.map-container {
width:960px;
transform-origin: 0px 0px;
transform: scale(0.8);
}
a.state-name {
position:absolute;
}
a.state-name:hover {
background-image: url("http://i.stack.imgur.com/aB42n.gif");
}
a#europe {
background-position: -420px -140px;
left: 420px;
top: 140px;
height: 45px;
width: 210px;
}
<div class="map-container">
<img src="http://i.stack.imgur.com/319c9.gif" />
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" />
<a id="europe" class="state-name" href="#"></a>
</div>
Note:
you need to define for each country name a a tag and proper css rules: background-position, width, height, left, top like for #europe example
.map-container - must have the same width as the original image 960px
you need to use JS or CSS transform property to scale the whole .map-container if you need to resize the map, otherwise the hover elements will be misplaced.
Pay attention to css transform properties
This is an experimental technology. Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
I am almost certain that this is not possible to create, but I have to ask. So I have those 3 divs. One is main wrapper, other is green one on the right side, and 3rd is the small one. So what would I like is to make that small div transparent all the way down to wrapper. So that it doesn't have green background, but the smiley one. Don't think it's possible, but then again, I might be wrong. I know I can split the green div in 4 blocks and "wrap" the transparent one, but that won't work because I have border radius on the small one.
UPDATED:
http://jsfiddle.net/9hLf8mcu/3/
Just add this background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi');
background-position:center right; to your .same_as_blue {
DEMO
It is not possible with pure css as you would need to have the green div to be transparent too, which it obviously isn't. A work around would be to give your small square the same background as the one you want it to have and then use background-position to move the image to where you want it
.blue {
width: 200px;
height: 200px;
}
.blue,
.same_as_blue {
background: url(http://lorempixel.com/200/200/) left top no-repeat;
}
.green {
width: 50px;
height: 100%;
background: green;
float: right
}
.same_as_blue {
width: 40px;
height: 40px;
background-position: -150px top;
}
<div class="blue">
<div class="green">
<div class="same_as_blue"></div>
</div>
</div>
Your fiddle updated - If you move the background:green you will see the little image matches up nicely
I really like Anthony's answer using the duplicated background. Another solution would be to look into the clip and mask features of CSS.
Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!
div background color, to change onhover
This may help you.
With javascript, you can do:
<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
Using CSS alone, it is not possible to affect the style of an ancestor of the hovered element. Your problem requires JavaScript.
Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.
Take a look at the code.
body {
background: lightblue;
}
a:hover:before {
content: '';
position: absolute;
display: block;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
}
li:nth-of-type(1) a:hover:before {
background-color: blue;
}
li:nth-of-type(2) a:hover:before {
background-color: red;
}
li:nth-of-type(3) a:hover:before {
background-color: green;
}
Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.
There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.
missing style in onmouseover:
class="test" onmouseover="document.body.style.backgroundColor='red';"
I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.
I know how to apply transparency to background colours and block level elements but can you do this for a background image?
Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.
The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.
Here's a sample of how this approach would work:
#container {
width: 200px;
postiion: relative;
}
#semitrans {
width: 100%; height: 100px;
background: #f00;
opacity: 0.6;
filter:alpha(opacity=60);
}
#hello {
width: 100%; height: 100px;
position: absolute;
top: 20px; left: 20px;
}
<div id="container">
<div id="semitrans"></div>
<p id="hello">Hello World</p>
</div>
No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.
You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!
IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.