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

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

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

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 был у родителя.

Это дебильное изобретение и следует отметить что попадается нечасто, но попадается. Прежде чем ломать голову как это сделано, подумайте головой покупателя. Которому взяли и закрыли соседний товар зачем-то. Не то, чтобы ему сильно важно было видеть все, просто рефлексия выходит ужасная.

Делается гораздо проще. Инфа просто появляется либо на месте фотки, либо поверх фотки на фоне через который фотка чуть просматривается. Можно сделать красиво - подвели - внутренности плавно уехали вверх, фотка изчезла, инфа появилась.

Короче говоря я вам как дизайнер (программирование это типа хобби) говорю - не уподо бля йтесь.

ЗЫ Вот что самое главное - нахера ее вообще прятать? Самое смешное это конкретика - ну нахера фотки насосов-моторов с короткозамкнутым или фазовым ротором впаривать? Показывайте инфу нормально, все равно она нужна, а немного показать всегда можно так, чтоб не зенки не выпали. Я же не говорю о рашн-традишн пихать жырную красную кнопку КУПИТЬ в каждой тумбе. Просто дать инфу можно аккуратно.

У вас написано карточка товара, а там на картинке так меню устроено. Так вот устройство такое, что подвел мышь - чтобы посмотреть другое, надо дать кругаля, поскольку иначе тот блок просто не исчезнет. Маразм? Маразм.

И начинается отсюдова - почему там ***тический голубенький цвет на фоне? Потому что без цветного фона эту плашку не выделить явно. Потом еще надо явнее - строчку пустить, тенюхой подбить и все такое. В результате коэффициент дерьма на единицу площади растет.