Добавление разного текста на изображения

255

13 мая 2022, 18:20

Как добавить текст на эти изображения?

.test img {
  width: 45%
}

<div class="test">
  <img src="https://i114.fastpic.ru/big/2020/1115/b8/078caec54e8b894fc2d5b04cf94b21b8.png" alt="">
  <img src="https://i114.fastpic.ru/big/2020/1115/0f/1b63532892f07582cf9b81a6f2a3d60f.png" alt="">
</div>

Их там намного больше, но я хочу увидеть пример на двух изображениях.

Answer 1

Например так

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
}
img {
  display: block;
  width: 100%;
}
.flex {
  display: flex;
}
.test {
  position: relative;
  width: 50%;
}
p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3vw;
  color: #fff;
}

<div class="flex">
  <div class="test">
    <p>Vorsprung durch Technik</p>
    <img src="https://topautomag.com/wp-content/uploads/2014/03/2014-Audi-TT-RS-0-60.jpg" alt="">
  </div>
  <div class="test">
    <p>Pure art, real drive</p>
    <img src="https://www.cheersandgears.com/uploads/monthly_2016_08/67f7532ec6a89739851f630805f384cf.jpg.20906beea36c3f7de973bfe9b578b6d6.jpg" alt="">
  </div>
</div>

Или с некой анимацией

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
}
img {
  display: block;
  width: 100%;
}
.flex {
  display: flex;
}
.test {
  position: relative;
  width: 50%;
  overflow: hidden;
}
p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 1000%);
  font-size: 2.3vw;
  color: #fff;
  transition: 0.68s cubic-bezier(0.01, 1.49, 0, -0.18);
  z-index: 10;
}
.test:hover p {
  transform: translate(-50%, -50%);
}
.hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.hidden div {
  background: #A0141C;
  opacity: 0;
  width: 33%;
  box-sizing: padding-box;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: 1s 0.68s cubic-bezier(0, 1.18, 1, -0.24);
}
.test:nth-child(2) .hidden div {
  background: #0A2328;
}
.hidden div:nth-child(1) {
  transition-delay: 1.2s;
}
.hidden div:nth-child(2) {
  transition-delay: 1.4s;
}
.hidden div:nth-child(3) {
  transition-delay: 1.7s;
}
.hidden div:nth-child(4) {
  transition-delay: 1s;
}
.hidden div:nth-child(5) {
  transition-delay: 1.5s;
}
.hidden div:nth-child(6) {
  transition-delay: 1.9s;
}
.hidden div:nth-child(7) {
  transition-delay: 1.3s;
}
.hidden div:nth-child(8) {
  transition-delay: 1.8s;
}
.hidden div:nth-child(9) {
  transition-delay: 2.8s;
}
.test:hover .hidden div {
  opacity: 0.5;
}

<div class="flex">
  <div class="test">
    <p>Vorsprung durch Technik</p>
    <div class="hidden">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <img src="https://topautomag.com/wp-content/uploads/2014/03/2014-Audi-TT-RS-0-60.jpg" alt="">
  </div>
  <div class="test">
    <p>Pure art, real drive</p>
    <div class="hidden">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <img src="https://www.cheersandgears.com/uploads/monthly_2016_08/67f7532ec6a89739851f630805f384cf.jpg.20906beea36c3f7de973bfe9b578b6d6.jpg" alt="">
  </div>
</div>

Если не хотите использовать relative + absolute

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.img {
  grid-area: 1 / 1 / 2 / 3;
}
.text {
  grid-area: 1 / 1 / 2 / 3;
}
img {
  display: block;
  width: 100%;
}
.flex {
  display: flex;
}

<div class="flex">
  <div class="grid-container">
    <div class="img">
      <img src="https://topautomag.com/wp-content/uploads/2014/03/2014-Audi-TT-RS-0-60.jpg" alt="">
    </div>
    <div class="text">
      <p>Vorsprung durch Technik</p>
    </div>
  </div>
  <div class="grid-container">
    <div class="img">
      <img src="https://www.cheersandgears.com/uploads/monthly_2016_08/67f7532ec6a89739851f630805f384cf.jpg.20906beea36c3f7de973bfe9b578b6d6.jpg" alt="">
    </div>
    <div class="text">
      <p>Pure art, real drive</p>
    </div>
  </div>
</div>

Answer 2

Например, так?

.test img {
  width: 45%
}
.test p {
   width: 45%;
   display: inline-block;
   position:absolute;
   color: #000;
   text-shadow: 1px 1px 1px #fff;
   text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="test">
    <p>Не баба а мужик</p>
    <img src="https://i114.fastpic.ru/big/2020/1115/b8/078caec54e8b894fc2d5b04cf94b21b8.png" alt="">
    <p>Не баба а мужик</p>
    <img src="https://i114.fastpic.ru/big/2020/1115/0f/1b63532892f07582cf9b81a6f2a3d60f.png" alt="">
  </div>
</body>
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

phpmyadmin не хочет добавлять sql файл ошибка:

Всем привет, хочу перенести мой старый сайт сделанный на WordPress с хостинга на сервакФайлы есть, теперь проблема только с БД от WordPress

390

MySQL

UPDATE users SET password = crypt(password, gen_salt("bf", 8)) эквивалентная запись в MySQL

Прохожу видео курс по Java(знаю многие против видео курсов), и там используется PostgreSQL

204

c++

Олимпиадная задача. Монетки

Ограничение времени 1 секунда

349

c++

Как возможно ускорить алгоритм?

Написал программу, которaя в маcсиве из n целых чиcел наимeньший элeмент поставит на первое место, наименьший из оcтавшихся - на пoследнее, следующий...

267