2

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

<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>

1]

4 ответа 4

4

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

.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>

3

.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

2
  • 1
    хороший ответ (+) На мой взгляд текст крупнее надо сделать и выбрать белый цветЮ а то он совсем теряется в сетке 11 июн 2018 в 22:40
  • @Alexandr_TT, это всё легко поправимо, я лишь написал реализацию)
    – De.Minov
    13 июн 2018 в 22:56
1

Создайте отдельный блок с текстом,
и поставьте картинкам 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>

0

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.