Карточка товара при наведении
 

Добрый вечер. Подскажите как сделать такое:

Я понимаю, что событие нужно делать при наведении на див, но как расширить его и добавить туда дополнительную информацию?

Dark19,
там скорее всего уже есть дополнительная информация,просто у нее стоит display:none,при наведение меняется на block.

Такие вещи делаются с помощью css. :hover что такое слышал? position:absolute\relative?

Слышал. А содержимое в низу как туда добавить в css?

z=index еще погляди, пригодится.
Увы нет возможности писать тебе пример, но можешь глянуть демку какой нибудь cms-ки или html-шаблона. Таких вот штук тьма особенно в шаблонах для интернет-шопов, если поискать немного точно найдешь пример (вроде стандартный opencart'овский шаблон даже этим же грешит)

Уже все почти вышло. Вот код одной карточки:

<div class="test">
                <a href="#" class="test2">
                    <div class="product">
                        <div class="product-img">
                            <img src="images/product7.png" alt=""/>
                        </div>
                        <h2>Сопутствующие товары</h2>
                    </div>
                </a>
            </div>

блок с содержимым контентом добавляю через jquery вот так:

$('.product').append("<div class='product-popup'><ul><li>Wilo</li><li>Saer</li><li>Grundfos</li><li>Lowara</li><li>Расширительные баки</li></ul></div>");

, стили задал для блоков через css:
. Потом опять же через jquery меняю стили:

$('.test2').hover(
        function(){
                $(this).css({'position':'absolute', 'z-index':'99999'});
                $(this).find('.product-popup').each(function(){
                $(this).css({'display':'block'});
                })
        },
            function(){
            $('.product-popup').css({'display':'none'});
            $('.test2').css({'position':'static', 'z-index':'1'});
            });

Все вроде бы работает, но каждый последний блок в строке подминает под себя первый в следующей строке и ничего с этим не могу сделать. Почему так выходит?

Вам совершенно не нужно добавлять жикури.
Да и html менять не стоит.

Вам предлагали следующее решение.
Создаём див с товаром.

<div class="content">
	<img /><br />
	супер дупер мега штука
</div>

Это основной див который видит у вас пользователь.
Дальше мы решаем по какому пути пойдём: чистым css или js.
Если идём через css. Тогда дописываем снизу к блоку болк, спан, в общем всё что угодно. И тогда получаем:

<div class="content">
	<img /><br />
	супер дупер мега штука
	<div class="dopContent">
		Она умеет так-то так-то и ещё вот так!!!!1111
	</div>
</div>

Для нормального отображения этого дела пишем css

.content{
	width: 100px;
	heigth: 100px;
	position: relative;
	background: #aef;
}
.dopContent{
	position: absolute;
	display: none;
	width: 100px;
	heigth: 20px;
}

Дальше нам надо настроить изменение стилей при наведении. Будем это делать с помощью псевдокласса :hover. .class:hover{тут тот стиль который нужен у блока с классом .class при наведении} .class:hover .dopClass{тут тот стиль который будет у блока с классом .dopClass при наведении на блок с классом .class}
Если вы хотите что либо поменять в .dpoClass он должен быть ОБЯЗАТЕЛЬНО вложен в блок .class.
Дальше мы пишем соответствующие свойства:

.content:hover{
	background: #fff;
}
.content:hover .dopContent{
	display: block;
}

Надеюсь мне простят ссылку почти конкурентов http://htmlbook.ru/css/hover
И если действовать через js, то идея та же. Просто меня стиль элемента с display:none на block и обратно. Не стоит ничего дописывать а потом удалять. :victory:

Тут такая странная штука, убираю relative в родительском блоке - работает, ставлю - не работает

Leon-on12,
Может подскажите как сделать чтобы бэкграунд с родительского блока обволакивал еще и этот скрытый при его появлении?

Спасибо. Разобрался почему не работало так как нужно, там overflow: hidden был у родителя.