Как сделать такой эффект?

[LingVist]

Доброго дня всем.

На этом сайте - https://likadress.ru/ имеется интересный эффект, когда при наведении на картинку появляется дополнительная инфа с параметрами и возможностью выбирать размеры и добавления в корзину. Такой вопрос - для этого есть какое-то готовое решение или все нужно писать самому?

Спасибо

[SuperZen]

<style>
  .html,
  .body {
    height: 100%;
  }

  .container {
    display: flex;
    flex-direction: row;
    padding-left: 10em;
  }

  .item-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    min-height: 10em;
    margin: 1em;
  }

  .item {
    width: 100%;
    min-height: inherit;
    background-color: red;
  }

  .item-info-left {
    display: none;
    position: absolute;
    left: -5em;
    width: 5em;
    min-height: 15em;
    background-color: blue;
  }

  .item-wrapper:hover .item-info-left,
  .item-wrapper:hover .item-info-bottom {
    display: block;
  }

  .item-info-bottom {
    display: none;
    position: absolute;
    bottom: -5em;
    height: 5em;
    width: 100%;
    background-color: green;
  }
</style>

<div class="container">
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info-left</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
</div>

конечно, далеко не верстальщик...) идея примерно такая...

конечно все самому писать

[j0hnik]

LingVist все стили и фронт можете с это сайта взять, я разрешаю!