CODEWITHSUNDEEP
javascripthtmlcss
one-hand-octopus
one-hand-octopus

Reputation: 2763

How to cover all but one div with frosted glass effect?

Say I have 2 divs, I moved 1 div to hover above all other divs using position: absolute like this:

.wrapper {
  display: block;
}

.block1 {
  width: 100px;
  height: 300px;
  background-color: grey;
}

.block2 {
  width: 100px;
  height: 200px;
  background-color: yellow;
}

.block3 {
  width: 100px;
  height: 50px;
  background-color: green;
  position: absolute;
  top: 10%;
}
<div class='wrapper'>
  <div class='block1'>Block 1</>
  <div class='block2'>Block 2</>
  <div class='block3'>Block 3</>
</div>

Now I'd like to add a frosted glass to all the divs except block3. I know the frosted glass effect can be done by something like filter: blur(10px), but how can I modify block3 class to apply this effect to all other divs? In other words I want block3 to be clear, everywhere else should be blurred. Surely adding filter: blur(10px) to all other divs are not allowed because in reality I could have block4, block5 etc.

EDIT: thanks for all the help, what I wanted was to have any single block unblurred, and all other blocks blurred. So Marc's answer is correct.

Upvotes: 0

Views: 471

Answers (3)

epascarello
epascarello

Reputation: 207537

User hover and target the element

.wrapper {
  display: block;
}

.wrapper:hover > .block {
  filter: blur(10px);
}

.wrapper:hover > .block:hover {
  filter: blur(0px);
}
<div class='wrapper'>
  <div class='block'>Block 1</div>
  <div class='block'>Block 2</div>
  <div class='block'>Block 3</div>
</div>

if you want it hard coded

.wrapper {
  display: block;
}

.wrapper > .block {
  filter: blur(10px);
}

.wrapper > .block3{
  filter: blur(0px);
}
<div class='wrapper'>
  <div class='block'>Block 1</div>
  <div class='block'>Block 2</div>
  <div class='block block3'>Block 3</div>
</div>

Upvotes: 0

Ross
Ross

Reputation: 126

If I understand correctly this is all possible with CSS.

To create your frosted glass effect use a CSS class selector *="class" (equivalent to CSS attribute selector) which selects all elements whose class contains at least one substring "block".

[class*="block"] {
  filter: blur(10px);
}

Then when you hover over a div, override the styles with this:

[class*="block"]:hover {
  filter: none !important;
}

Upvotes: 0

Marc
Marc

Reputation: 11633

Note the new CSS I added, which excludes the <div> with a class of block3.

.wrapper {
  display: block;
}

.block1 {
  width: 100px;
  height: 300px;
  background-color: grey;
}

.block2 {
  width: 100px;
  height: 200px;
  background-color: yellow;
}

.block3 {
  width: 100px;
  height: 50px;
  background-color: green;
  position: absolute;
  top: 10%;
}

div.wrapper > div:not(.block3) {
  filter: blur(10px);
}
<div class='wrapper'>
  <div class='block1'>Block 1</div>
  <div class='block2'>Block 2</div>
  <div class='block3'>Block 3</div>
</div>

If you're goal is to hide the last .block element, as others have assumed, then you could use the following instead:

div.wrapper > div:not(:last-child) {
    filter: blur(10px);
}

Upvotes: 2

Related Questions