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

Question

Елизавета @elizaveta_kotik

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

Поверх каждого блока нужно добавить такой блик :

сам код разметки

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
                    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
                    <div class="mini_post_text">
                        Italy<br/>
                        <span class="mini_post_price">from $1,050</span>
                    </div>
                </div>

Можно ли это сделать с помощью css, может как-то наложить svg? или нужно в ручную каждое изображение в фотошопе обрабатывать?

Вопрос задан более трёх лет назад
197 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Елизавета @elizaveta_kotik Автор вопроса

так а адаптивность как будет сохраняться? и можно ли пожалуйста, по-подробней? я видела данную статью но не совсем поняла как применить

Написано более трёх лет назад

zRrr @zRrr

Елизавета: вот пример:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }
  </style>
 </head>
 <body>
  <p class="card">
   <img src="images/3.png" alt="3" class="three" />
   <img src="images/7.png" alt="7" class="seven" />
   <img src="images/ace.png" alt="Туз" class="ace" />
  </p>
 </body>
</html>

здесь видно, что для картинок устанавливается релативная позиция, и дальше для получения нужного расположения используют left и top:

.card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }

Адаптивность будет сохраняться, если указывать значения в процентах.
Про позиционирование здесь

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 179 просмотров
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 239 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 116 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 301 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 731 просмотр
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 687 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 349 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 684 просмотра
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 259 просмотров
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 263 просмотра
1

ответ
Показать ещё Загружается…

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Специалист тех поддержки (английский язык, смены с 16:00 до 00:00 Мск)

ТехСофт

от 50 000 ₽

Разработчик JavaScript/NodeJS, специалист технической поддержки

A-Parser

от 800 до 800 $

Answer 1 · 2017-07-20 14:34:26

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
    <!-- Бликовая картинка -->
    <img src="img/reflect_light.png" class="reflect_light">
    <!-- Обычная картинка -->
    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
        <div class="mini_post_text">
            Italy<br>
            <span class="mini_post_price">from $1,050</span>
        </div>
</div>

.mini_post {
    position: relative;
}

.reflect_light {
    position: absolute;
}

Answer 2 · 2017-07-19 19:57:44

zRrr @zRrr

Вот

Ответ написан более трёх лет назад

2 комментария

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт