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
  </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
  </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 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: 768px; height: 551px;
  --src: url(https://hdwallpaperfx.com/wp-content/uploads/2017/09/Autumn-Girl-Walking-on-Road-Beautiful-Legs-768x551.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...

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: 19px/1.375 Lato, sans-serif;
  text-shadow:
    0 0 1.0em #000,
    0 0 0.5em #000,
    0 0 1.0px #000;
}

/* blur layer */

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

/* blackout layer */

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

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

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

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