Blur part of an image with CSS (v3)

by denvdmj

HTML

<x-img src="https://image.ibb.co/eDXtEd/sunset_girl.jpg" width="600px" height="375px">
  <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
  </x-img-caption>
</x-img>

<x-img src="https://i.pinimg.com/originals/fe/5c/01/fe5c010c2ee03341462eea2f50bba5ba.jpg" width="600px" height="900px">
  <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
  </x-img-caption>
</x-img>

CSS

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

x-img {
  overflow: hidden;
  position: relative;
  background: var(--image-url);
  background-position: left bottom;
  background-size: cover;
}

/* caption, blur and blackout layers */

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

x-img-caption {
  box-sizing: border-box;
  height: auto;
  padding: 5px 20px 20px;
  filter: blur(0);
  color: white;
  font: 15px/1.3 Verdana;
  text-shadow:
    0 0  2px rgba(0,0,0,1),
    0 0  4px rgba(0,0,0,1),
    0 0 20px rgba(0,0,0,.3),
    0 0 20px rgba(0,0,0,.3);
}

/* blackout layer */
/*
  background-image:
    linear-gradient(transparent, rgba(0,0,0,.2)),
    var(--image-url);

*/
x-img-caption:before {
  background-image:
    linear-gradient(transparent, rgba(0,0,0,.2))
  ;
  padding: 20px 20px 20px;
  z-index: -1;
}

/* blur layer */
x-img-caption:after {
  filter: blur(4px);
  z-index: -2;
}


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

JavaScript

for (let img of document.querySelectorAll('x-img')) {
  img.style.setProperty('--image-url', `url(${img.getAttribute('src')})`);
  let width = img.getAttribute('width');
  let height = img.getAttribute('height');
  if (width) img.style.width = width;
  if (height) img.style.height = height;
}