Blur part of an image with CSS (v2)

by denvdmj

HTML

<x-img style="width: 735px; height: 490px;
  --src: url(https://i.pinimg.com/736x/f1/9f/7d/f19f7d1d023e1464ebf76de3f2748183.jpg)">
  <x-img-caption>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </x-img-caption>
</x-img>

<x-img style="width: 736px; height: 414px;
  --src: url(https://i.pinimg.com/736x/9a/27/51/9a2751f374a73019a2060c1ae8ab7e91--women-on-motorcycles-cars-motorcycles.jpg)">
  <x-img-caption>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </x-img-caption>
</x-img>

<x-img style="width: 736px; height: 588px;
  --src: url(https://i.pinimg.com/736x/eb/07/0f/eb070f88dab7acfa7ed9019242823c34.jpg)">
  <x-img-caption>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    Lorem Ipsum is simply dummy text of the...

CSS

x-img,
x-img-caption {
  display: inline-block;
}

x-img {
  overflow: hidden;
  position: relative;
  background: var(--src) left bottom no-repeat;
  background-size: cover;
}

/* caption, blur and blackout layers */

x-img-caption,
x-img-caption:after,
x-img-caption:before {
  background: inherit;  
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}

x-img-caption {
  box-sizing: border-box;
  height: auto;
  padding: 20px;
  filter: blur(0);
  color: #fff;
  font: 14.5px/1.375 Lato, sans-serif;
  text-shadow:
    0 0 1em rgba(0,0,0,0.2),
    0 0 1px rgba(0,0,0,1.0);
}

/* blur layer */

x-img-caption:after {
  filter: blur(.15em);
  z-index: -12;
}

/* blackout layer */

x-img-caption:before {
  background: linear-gradient(
    rgba(0,0,0,.2),
    rgba(0,0,0,.6)
  );
  z-index: -11;
}

x-img-caption::selection {
  background-color: transparent;
}

x-img:hover {
  filter: brightness(110%);
}

x-img:active {
  filter: brightness(140%) grayscale(100%);
}