Разместить текст на изображении

47
13 июля 2018, 04:40

Подскажите, как разместить текст поверх изображения, чтобы было как на картинке?

<div class="works-image"> 
  <img src="img/works_1.jpg" width="310px" alt=""> 
  <img src="img/works_2.jpg" width="295px" alt=""> 
  <img src="img/works_3.jpg" width="295px" alt=""> 
</div>

Answer 1

А бекграунд не вариант?

.works-image { 
  background: url(https://404store.com/2017/09/17/Spa-still-life-with-bamboo-fountain-and-zen-stone.jpg); 
  width: 33vw; 
  height: 33vw; 
  background-size: cover; 
} 
 
.works-image .overlay { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  opacity: 0; 
  justify-content: center; 
  color: #fff; 
  background-color: rgba(0, 0, 0, 0.4); 
  font-family: "Montserrat", sans-serif; 
  font-size: 3.5333333vw; 
  transition:1s opacity; 
} 
 
.works-image:hover .overlay { 
   
  opacity:1; 
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet"> 
<div class="works-image"> 
  <div class="overlay"> 
    <div class="content"> 
      Текст 
    </div> 
  </div> 
</div>

Answer 2

.image { 
  display: block; 
  width: 300px; 
  height: 300px; 
  overflow: hidden; 
  position: relative; 
} 
 
.image img { 
  width: 100%; 
  height: 100%; 
  border: 0; 
  object-fit: cover; 
} 
 
.image .text { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
}
<div class="image"> 
  <img src="https://static.tumblr.com/3d9ac85fda4c928fbf020185e2aab0c5/ecuyhbw/inIon7mm9/tumblr_static_badr4s3xiooc4sosgokwosk0s_640_v2.jpg"> 
  <div class="text">Title</div> 
</div>

demo

Answer 3

Создайте отдельный блок с текстом,
и поставьте картинкам position: absolute

.works-image { 
  position: absolute; 
}
<div class="works-image"> 
  <img src="img/works_1.jpg" width="310px" alt=""> 
  <img src="img/works_2.jpg" width="295px" alt=""> 
  <img src="img/works_3.jpg" width="295px" alt=""> 
</div>

Answer 4

.image { 
  position: relative; 
  width: 100%; /* для IE 6 */ 
} 
 
h2 { 
  position: absolute; 
  top: 466px; 
  left: 0; 
  width: 100%; 
} 
 
h2 span { 
  color: #fff; 
  font-size: 30px; 
  line-height: 55px; 
  background: rgba(0, 0, 0, 0.7); 
  background: #000; 
  padding: 10px 10px 10px 16px; 
}
<div class="image"> 
  <img src="image.jpg" alt="" /> 
  <h2><span>текст<br />поверх изображения</span></h2> 
</div>

READ ALSO
Как сделать такую css маску

Как сделать такую css маску

Подскажите, как сверстать такую белую адаптивную маскуПробовал через svg и border, но там возникают проблемы с %

46
Отображение iframe на мобильных

Отображение iframe на мобильных

У меня 2 iframe pdfОни скрыты

26
Можно ли в шапке таблицы указать позиционирование текста?

Можно ли в шапке таблицы указать позиционирование текста?

Можно ли в html сделать так, чтобы текст отобразился в ячейке таблички так же как на рисунке?

34
Установка шрифта для &lt;label&gt;

Установка шрифта для <label>

Пытался установить стили для шрифта label-а, но почему-то в моем приложении стили не применяютсяВесь этот блок когда находится внутри другого...

31