Добавление списка товаров на изображение - PullRequest
Новая
       11

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

0 голосов
/ 31 января 2019

Я использую minimal template в Shopify и хотел бы воссоздать это изображение в приложении.Я пытался найти похожие примеры, но ничего не нашел.Как мне создать этот образ?Как получить изображение за меню?

Trying to Create

Любые ссылки или документы для получения изображения действительно помогут.

1 Ответ

0 голосов
/ 31 января 2019

Попробуй разбить дизайн, чтобы проработать его составные части.Вы хотите фоновое изображение и наложение с карточками продуктов.Вы хотите расположить оверлей поверх изображения, сделав это, применив position: относительно родителя и position: absolute для дочернего элемента, чтобы он был расположен в пределах его родителя.Затем примените transform: translate (), чтобы перевести наложение в зависимости от его размера для достижения смещения с правой стороны.

Вот ручка: https://codepen.io/NeilWkz/pen/qgRMyW

<div class="img-hero-with-menu-overlay">
 <div class="left-img">
  </div>
  <div class="overlay">
    <div class="product-card">
      <img src="https://lorempixel.com/300/150/" alt="">
      <div class="info">
        <h3>Product 1</h3>
        <p>lorem</p>
      </div>
    </div>
    <div class="product-card">
      <img src="https://lorempixel.com/300/150/" alt="">
      <div class="info">
        <h3>Product 2</h3>
        <p>lorem</p>
      </div>
    </div>
    <div class="product-card">
      <img src="https://lorempixel.com/300/150/" alt="">
      <div class="info">
        <h3>Product 3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
      </div>
    </div>
  </div>
</div>

CSS 

img-hero-with-menu-overlay {
  position: relative;
  background-color: #bcbdc0;
  width: 100%;
  display: block;
}
.left-img {
  height: 100vh;
  display: block;
  width: 75%;
  background: url("https://www.llialighting.com/Content/files/ProductImages/v_06f3_angled448253599.png")
    no-repeat center center;
  background-size: cover;
}
.overlay {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-12.5%, -50%);
  width: 40%;
}

.product-card {
  display: flex;
  margin-bottom: 1.5rem;
}

.info {
  padding: 1.5rem;
}
...