Размещение текста поверх изображений требует внимания к цвету и контрастности для сохранения четкости. Дизайнеры печатной продукции всегда использовали для этого непрозрачный фон, этот эффект легко повторить и в веб-дизайне, используя цвета с прозрачностью или режимы смешивания.

Еще можно размыть изображение, этот эффект часто используют программы новостей на телевидении. При создании веб-сайта нужно понимать, что фильтры CSS влияют на содержимое внутри элемента, к которому они применяются, а не на содержимое, находящееся под блоком. Так что для создания этого эффекта нужно использовать две копии одного и того же изображения: одну копию как фон и одну — как само изображение. Основная разметка очень опрятная, все размещено в элементе фигуры:

<figure>
    <img src="jellyfish.jpg" alt="Blue jellyfish">
    <figcaption>
    <strong>Turritopsis nutricula</strong> is a hydrozoan…
    </figcaption>
</figure>

После этого элементу подписи фигуры очень точно задается расположение в элементе фигуры и элемент подписи фигуры прячется. Элементу фигуры задается размер шрифта нуль, чтобы гарантировать отсутствие зазоров внутри элемента, и чтобы все выстраивалось ровно:

figure {
background: url(jellyfish.jpg);
    background-size: cover;
    position: relative;
    color: #fff;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.6);
    font-size: 0;
}
figcaption {
  position: absolute;
  top: 6%;
  left: 18%;
  width: 40%;
  line-height: 1.4;
  font-size: 1.6rem;
  opacity: 0;
  transition: .4s .2s opacity;
}

Изображение внутри элемента фигуры смасштабированно так, чтобы совпадать с фоном, и обрезано, чтобы занимать тот же размер, что и элемент подписи фигуры.

Слои при создании эффекта размытия фона подписи

figure img {
  width: 100%;
  clip-path: polygon(15% 5%, 60% 5%, 60% 40%, 15% 40%);
  transition: .6s filter;
}

При наведении указателя мыши изображение размывается, а элемент подписи фигуры становится видимым:

figure:hover img {
  filter: blur(8px);
}
figure:hover figcaption {
  opacity: 1;
}

Делаем размытое изображение адаптивным и работающим в различных браузерах

Размытое изображение не изменит свой размер при изменение положение текста и не удлинится при сужении окна браузера, так что нужно или сделать его сразу достаточно большим, чтобы был запас для увеличения, или изменять его размер в зависимости от размера окна браузера:

@media all and (max-width: 1200px) {
  figure img {
    clip-path: polygon(15% 5%, 60% 5%, 60% 60%, 15% 60%);
  }
}
@media all and (max-width: 1000px) {
  figure {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  figcaption {
    font-size: 1.2rem;
  }
}
@media all and (max-width: 500px) {
  figure img {
    clip-path: polygon(15% 5%, 60% 5%, 60% 80%, 15% 80%);
  }

Если нужна поддержка старых версий браузеров, особенно браузера Firefox, которые не поддерживают этот способ записи, подробней об этом можно прочитать в этом уроке, то используем эти же цифры, но в виде десятичной дроби, записанные в одном элементе:

<svg id="svgpath">
    <defs>
        <clipPath id="large" clipPathUnits="objectBoundingBox">
            <polygon points=".15 .05,.6 .05,.6 .4,.15 .4" />
        </clipPath>
        <clipPath id="med" clipPathUnits="objectBoundingBox">
            <polygon points=".15 .05,.6 .05,.6 .6,.15 .6" />
        </clipPath>
        <clipPath id="small" clipPathUnits="objectBoundingBox">
            <polygon points=".15 .05,.6 .05,.6 .8,.15 .8" />
        </clipPath>
  </defs>
</svg>

И после этого укажем все идентификаторы в media queries: 

figure img {
  clip-path: url(#large);
}
@media all and (max-width: 1200px) {
  figure img {
    clip-path: url(#med);
  }
}

Чтобы полигоны SVG не добавили зазоров на страницу, уменьшим их размеры до нуля, при этом упомянутые элементы clip-path по-прежнему будут работать:

svg#svgpath { width: 0; height: 0; }

Результат можете посмотреть ниже или на сайте CodePen.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Горизонтальное меню с размытием неактивных пунктов на CSS
• Проявляющиеся фотографии Polaroid с использованием переходов CSS
• Создание подписей изображений с использованием элементов фигур