Transparency in CSS is dealted with the opacity property and eye-focus experience with the blur filter. Let's explore that with a typical focus variation use case: droplets on a glass. As you can see below, it is expected that eye-focusing on a layer blurs the other one.

The structure

It is the simplest as it can be : a layer for the landscape, then another layer for the glass before it.

  <div class="landscape"></div>
<div class="glass"></div>

As you may know, the declaration order implies that the latest glass layer, if positionned at the same location, will be above the first landscape layer.

To achieve our example, let's put images on our layers. We have multiple options to do so:

  • background images: while this is theorically hard to manage because of lack of background-opacity CSS property, some hacks exist and our case would not even need it. Using background: url('MyImage.jpg') no-repeat center fixed; and background-size: cover; would be enough
  • a simple image inside each layer.

For the sake of simplicity, we'll use the latest option, but remind of the first as it may help you deal with other layers contents (text contents, typically) without caring of additional layer ordering.

  <div class="landscape">
  <img src="stormy-landscape.jpg">
</div>
<div class="glass">
  <img src="glass-with-water-drops.jpeg">;
</div>

The styling

First of all, a simple setup to display the layers one above the other:

  div {
  position: absolute;
  width:  100%;
  height: 100%;
}

If not specified, both layers are assumed to be positionned at the same top: 0; left: 0.

Of course, the images should occupy the full space of their respective containers:

  img {
  width:  100%;
  height: 100%;
}

Transparency

Now let's make the glass layer tranparent. We could have used an image with actual transparent pixels, but changing the opaque glass-with-droplets image opacity will be enough for this demo:

  .glass {
  opacity: 0.5;
}

Then we have to choose an initial focus context. Let's say that we want to show a focus on the glass: that means blurring the landscape:

Eye focus

  .landscape {
  filter: blur(10px);
}

Variating eye-focus

Finally, let's produce variation of the eye-focus, by changing the blur radius of each layer. We could trigger this in a variety of ways (buttons, etc.), but for this demo we'll use an automatic animation:

  @keyframes eye-focus {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(10px);
  }
}

(don't forget to add prefix to support browers that still need them)

Then let's ask each layer to run the animation, with only one difference between them. The second one has a delay to start, so each eye-focus variation will be reverse, as it is expected for the different layers.

  .landscape {
  filter: blur(10px);
  animation: eye-focus 3s ease-in infinite alternate;
}
.glass {
  filter:  blur(0px);
  animation: eye-focus 3s ease-in infinite 3s alternate;
}

(browsers prefixes should still be applied here)

Note that, even being zero, we have set the initial glass blurring so that the animation will know from each value to start.

A further touch of realism

Should you want to add a bit of realism, you may also want to reflicate some kind of old photography artefact of a "zoom shift" when focusing. Furthermore, any move of the window over the landscape will increase the impression of depth.

This will imply changing the size of the layers, and the wrong way to do it would be through width and height, as it doesn't change the origin position of the layer. Instead, we'll use the scale transform in a second animation declaration:

  @keyframes zoom-shift {
  0% {
    transform: scale(1)
  }
  100% {
    transform: scale(1.05)
  }
}

then we chain this animation with the current ones, so that each layer will zoom a bit when focused:

  .landscape {
  animation: eye-focus  3s ease-in infinite alternate, 
             zoom-shift 3s ease-in infinite alternate;
}
.glass {
  animation: eye-focus  3s ease-in infinite 3s alternate, 
             zoom-shift 3s ease-in infinite 3s alternate;
}

Now you can see an eye focus outside the window with a kind of realism. Feel free to fork.


1,681 0 0