Overlay эффект в css3 или текст поверх изображения
103Web-разработка

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

Важно! На 07.02.2020 только на flexbox сверстать подобное можно только под Google Chrome, но не будет кросcбраузерно под: Safari & Firefox.

HTML-разметка:

#html
<div class="container">
  <img src="img.jpg" alt="img" class="img">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

CSS-стили:

#css
/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}
.img{width:100%;}
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Текст поверх изображения идеально по центру.

CSS-стили:

#css
/* Container holding the image and the text */
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}
.img{width:100%;}
/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  display: flex;
  flex-direction: column;
}

HTML-разметка:

<div class="container">
  <img src="img.jpg" alt="img" class="img">
  <div class="centered">Centered</div>
</div>