Make a container transparent only when another div is over [duplicate] - css

This question already has answers here:
How to make a child div transparent?
(2 answers)
Closed 5 years ago.
So as exposed in the title, i'd like to make a part of a container transparent, but only where there is another div, I know I can't tell it clearly, then I made an example :
I don't know if it is possible doing this, using ONLY CSS, I can't use JQuery, not even Javascript.
Thank you in advance for your answers :)

No, this can't be done with CSS alone. However, as CBroe has said, you could apply the same background image to the second/inner to give the illusion that it's transparent.

Related

Is it possible to make divs overlap like cards *just* using css [duplicate]

This question already has answers here:
Partially overlap elements using CSS
(3 answers)
Closed 11 months ago.
Currently my site looks like this (making a browser based card game), please ignore the art for now - screenshot - I would like them to overlap slightly rather than wrapping around and creating a new line almost like someone is holding the cards. I have no idea where to even start with this without using js so I was wondering if anyone could help me come up with a solution that just uses pure css solution.
You can use margin-left and margin-right with negative values. Or you can set the card positions by using position: absolute and left and top properties.

Why chrome devtools showing this?Body color is not working [duplicate]

This question already has answers here:
How do I prevent my style from being overridden another style on a surrounding div?
(6 answers)
Closed 1 year ago.
why body color is not working?
and i am seeing this in devtools . the problem is marked on the picture.
i got the solution . just written this as base a{color:red}
This is no bug. The body color is overwritten by something else, as wOxxOm pointed out. You might wanna take a look at this Q&A.
Either you use the !important attribute in your CSS or give the specific part you want colored a more specific selector. The CSS styles priorities decline from specific to general.

How to make honeycomb borders? (CSS) [duplicate]

This question already has answers here:
How to create a triangular shape with curved border?
(2 answers)
Responsive irregular background shape with CSS
(3 answers)
Closed 2 years ago.
In general, the task is a little more difficult. Perhaps it is not border-raudius that should be used here. I do not know..
To better explain the problem, take a look at the following image:
There is a list of items. On hover, element borders and horizontal lines on the sides change color.
Even if I set the borders, I don’t know how to make horizontal lines on the sides and make them interact at the same time on hover.
Do you have any ideas how you can implement this? What approach is needed to solve this problem?
Using only CSS.
Thanks!

using a div to blur an image behind it? [duplicate]

This question already has answers here:
How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
(10 answers)
Closed 9 years ago.
Is it possible to code a div to enable it to blur whatever image is under it?
something like this:
Could this be done somehow with -webkit maybe?
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!
Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.
There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/

Styling scroll bars with CSS [duplicate]

This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I tried searching online but I didn't find any good sources on this. Is there a way to style scroll bars with pure CSS so that it is compatible with a maximum number of browsers?
You can style scrollbars in Internet Explorer and Webkit only.
Note that these are not standard properties.
However, you can achieve this with JavaScript. One project that does this is jScrollPane.
Adding my 2 pence a little late, but if you really want to style them I would suggest trying http://jscrollpane.kelvinluck.com/. It's not a pure CSS solution like you are looking for but is a solution of sorts.

Resources