Верстка, как сделать раскрытие полного названия товара при наведении?

Question

[Алексей]

Добрый день! Я начинающий web-разработчик. Прошу помощи. Верстаю интернет-магазин, имеются блоки с товарами.

<div class="col-md-3 col-sm-6">
     <div class="product-wrap">
          <div class="product-item">
               <div class="item-thumb">
                    <div class="overlay">
                         <div class="overlay-inner">
                              <a href="#modalBox" class="view-detail" data-toggle="modal" data-id="1">Быстрый просмотр</a>
                         </div>
                    </div> <!-- /.overlay -->
                    <div class="product-photo">
                         <img src="/image" alt="">
                    </div>
               </div> <!-- /.item-thumb -->
               <div class="product-description-wrap">
                    <div>
                         <h3><a href="/product/product"> Очень длинное название продукт</a></h3>
                         <span>Цена: <em class="price">350 &#8381;</em></span>
                    </div>
               </div>
          </div> <!-- /.product-item -->
     </div>
</div> <!-- /.col-md-3 -->

Название товара, обрезанное с помощью

.product-item h3{
     white-space: nowrap; 
     text-overflow: ellipsis; 
     overflow: hidden;
}

Как реализовать раскрытие полного названия при наведении, чтобы другие товары не съезжали? Если раскрывается полностью, то высота блока с продуктом увеличивается. Думал реализовать с помощью абсолютного позиционирования .product-description-wrap div. Но тогда общая высота продукта уменьшается и съезжают остальные товары.
Заранее всем спасибо!

Answer 1

[Андрей Б.]

Если название продукта во всех карточках с одинаковым количеством строк, то задайте жестко высоту и тогда сможете использовать absolute.
Сделайте живой пример например тут jsfiddle.net

Comments

[Алексей]

Дело в том, что название может быть с разным количеством строк.
Вот пример https://jsfiddle.net/gnunkaup/

[Андрей Б.]

FrieNze Как вариант https://jsfiddle.net/7c67wxkt/ , но если текста будет больше, то будет накладываться на цену. Поэтому лучше сделать фон для текста. Больше нет выхода.

[Андрей Б.]

FrieNze Суть в том, что указывается стандартная высота заголовка, когда он не в раскрытом состоянии.

[Ankhena]

FrieNze: сдвигайте наверх, пусть накладывается на картинку.

[Ankhena]

FrieNze: Посмотрите https://www.templatemonster.com/ru/demo/60059.html при наведении на товары (в разделе LATEST) там появляется еще блок для корзины. Вот по аналогии делайте для увеличения заголовка.

[Алексей]

Ankhena W: Спасибо, наиболее предпочтительный вариант!

Answer 2

[justdealman]

https://jsfiddle.net/4rrkfex4/1/