Здравствуйте помогите hover под картинкой виводится а надо поверх картинки Код: .product-grid > div { display: inline-block; vertical-align: top; text-align:center; border: 1px solid#F1ECEC; margin: 0 5px 15px; width: 231px; height: 410px; position: relative; } .product-grid > div:hover { background: url('../image/all.png') no-repeat; } сайт http://k63367ru.bget.ru/iphone/iphone-5s
Парень Ну почти правильно сделал. В .product-grid > div сделай обертку еще одного div с классом например product-hover HTML: HTML: <div class="product-grid"> <div> <div class="product-hover"> <div class="image"> </div> </div> ........... </div> </div> И тогда будет он выводиться поверх вложенности картинки. Ну и css .product-grid > .product-hover:hover { position:relative; background: url('../image/all.png') no-repeat; }
у меня в catego....tpl нету product-gird не знаю куда вписать <div> <div class="product-hover"> Код: <?php echo $header; ?><?php echo $column_right; ?> <div id="content"><?php echo $content_top; ?> <h1><?php echo $heading_title; ?></h1> <div class="contentvn"> <?php if ($thumb || $description) { ?> <div class="category-info"> <?php if ($thumb) { ?> <div class="image"> <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div> <?php } ?> <?php if ($description) { ?> <?php echo $description; ?> <?php } ?> </div> <?php } ?> <?php if ($categories) { ?> <h2><?php echo $text_refine; ?></h2> <div class="category-list"> <?php if (count($categories) <= 5) { ?> <ul> <?php foreach ($categories as $category) { ?> <li><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>"><span><?php echo $category['name']; ?></a></span></li> <?php } ?> </ul> <?php } else { ?> <?php for ($i = 0; $i < count($categories);) { ?> <ul> <?php $j = $i + ceil(count($categories) / 4); ?> <?php for (; $i < $j; $i++) { ?> <?php if (isset($categories[$i])) { ?> <li><a href="<?php echo $categories[$i]['href']; ?>"><img src="<?php echo $categories[$i]['thumb']; ?>"><span><?php echo $categories[$i]['name']; ?></span></a></li> <?php } ?> <?php } ?> </ul> <?php } ?> <?php } ?> </div> <?php } ?> <?php if ($products) { ?> <div class="product-list"> <?php foreach ($products as $product) { ?> <div> <?php if ($product['thumb']) { ?> <div class="cart"> <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /> </div> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <?php } ?> <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div> <div class="description"><?php echo $product['description']; ?></div> <?php if ($product['price']) { ?> <div class="price"> <?php if (!$product['special']) { ?> <?php echo $product['price']; ?> <?php } else { ?> <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span> <?php } ?> <?php if ($product['tax']) { ?> <br /> <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span> <?php } ?> </div> <?php } ?> <?php if ($product['rating']) { ?> <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div> <?php } ?> </div> <?php } ?> </div> <?php } ?> <?php if (!$categories && !$products) { ?> <div class="content"><?php echo $text_empty; ?></div> <div class="buttons"> <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div> </div> <?php } ?> <?php echo $content_bottom; ?> </div> </div> <script type="text/javascript"><!-- function display(view) { if (view == 'list') { $('.product-grid').attr('class', 'product-list'); $('.product-list > div').each(function(index, element) { html = '<div class="right">'; html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>'; html += '</div>'; html += '<div class="left">'; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } html += ' <div class="name">' + $(element).find('.name').html() + '</div>'; html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; var rating = $(element).find('.rating').html(); if (rating != null) { html += '<div class="rating">' + rating + '</div>'; } html += '</div>'; $(element).html(html); }); $('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>'); $.totalStorage('display', 'list'); } else { $('.product-list').attr('class', 'product-grid'); $('.product-grid > div').each(function(index, element) { html = ''; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } html += '<div class="name">' + $(element).find('.name').html() + '</div>'; html += '<div class="description">' + $(element).find('.description').html() + '</div>'; var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } var rating = $(element).find('.rating').html(); if (rating != null) { html += '<div class="rating">' + rating + '</div>'; } html += '<div class="cart">' + $(element).find('.cart').html() + '</div>'; $(element).html(html); }); $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>'); $.totalStorage('display', 'grid'); } } view = $.totalStorage('display'); if (view) { display(view); } else { display('grid'); } //--></script> <?php echo $footer; ?>
Если нужно что-то выводить поверх картинки, то и работать нужно с тегом img и его обёрткой. Но, если вы хотите, что-то вывести поверх картинки через css background, у вас это никогда не получится пока вы не скроете саму картинку, ибо она всегда будет выше любого фона. 1. Добавьте на блок с товаром какой-нибудь класс, например, product-block PHP: <?php foreach ($products as $product) { ?> <div class="product-block"> 2. Добавляем стили, чтоб спрятать изображение по hover: Код: .product-block:hover img{ opacity: 0; } 3. Показываем в фоне другое изображение: Код: .product-block:hover .image{ background: url('../image/all.png') no-repeat; }
в категориях tpl делаю так Код: <?php echo $header; ?><?php echo $column_right; ?> <div id="content"><?php echo $content_top; ?> <h1><?php echo $heading_title; ?></h1> <div class="contentvn"> <?php if ($thumb || $description) { ?> <div class="category-info"> <?php if ($thumb) { ?> <div class="image"> <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div> <?php } ?> <?php if ($description) { ?> <?php echo $description; ?> <?php } ?> </div> <?php } ?> <?php if ($categories) { ?> <h2><?php echo $text_refine; ?></h2> <div class="category-list"> <?php if (count($categories) <= 5) { ?> <ul> <?php foreach ($categories as $category) { ?> <li><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>"><span><?php echo $category['name']; ?></a></span></li> <?php } ?> </ul> <?php } else { ?> <?php for ($i = 0; $i < count($categories);) { ?> <ul> <?php $j = $i + ceil(count($categories) / 4); ?> <?php for (; $i < $j; $i++) { ?> <?php if (isset($categories[$i])) { ?> <li><a href="<?php echo $categories[$i]['href']; ?>"><img src="<?php echo $categories[$i]['thumb']; ?>"><span><?php echo $categories[$i]['name']; ?></span></a></li> <?php } ?> <?php } ?> </ul> <?php } ?> <?php } ?> </div> <?php } ?> <?php if ($products) { ?> <div class="product-list"> <?php foreach ($products as $product) { ?> <div class="product-block"> <?php if ($product['thumb']) { ?> <div class="cart"> <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /> </div> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <?php } ?> <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div> <div class="description"><?php echo $product['description']; ?></div> <?php if ($product['price']) { ?> <div class="price"> <?php if (!$product['special']) { ?> <?php echo $product['price']; ?> <?php } else { ?> <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span> <?php } ?> <?php if ($product['tax']) { ?> <br /> <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span> <?php } ?> </div> <?php } ?> <?php if ($product['rating']) { ?> <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div> <?php } ?> </div> </div> <?php } ?> </div> <?php } ?> <?php if (!$categories && !$products) { ?> <div class="content"><?php echo $text_empty; ?></div> <div class="buttons"> <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div> </div> <?php } ?> <?php echo $content_bottom; ?> </div> </div> <script type="text/javascript"><!-- function display(view) { if (view == 'list') { $('.product-grid').attr('class', 'product-list'); $('.product-list > div').each(function(index, element) { html = '<div class="right">'; html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>'; html += '</div>'; html += '<div class="left">'; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } html += ' <div class="name">' + $(element).find('.name').html() + '</div>'; html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; var rating = $(element).find('.rating').html(); if (rating != null) { html += '<div class="rating">' + rating + '</div>'; } html += '</div>'; $(element).html(html); }); $('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>'); $.totalStorage('display', 'list'); } else { $('.product-list').attr('class', 'product-grid'); $('.product-grid > div').each(function(index, element) { html = ''; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } html += '<div class="name">' + $(element).find('.name').html() + '</div>'; html += '<div class="description">' + $(element).find('.description').html() + '</div>'; var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } var rating = $(element).find('.rating').html(); if (rating != null) { html += '<div class="rating">' + rating + '</div>'; } html += '<div class="cart">' + $(element).find('.cart').html() + '</div>'; $(element).html(html); }); $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>'); $.totalStorage('display', 'grid'); } } view = $.totalStorage('display'); if (view) { display(view); } else { display('grid'); } //--></script> <?php echo $footer; ?> + добавляю стиль .product-block:hover img{ opacity: 0; } .product-block:hover .image{ background: url('../image/all.png') no-repeat; } ничего не меняется( --- Добавлено, 8 окт 2015 --- сделал смотрите http://k63367ru.bget.ru/iphone/iphone-5s#category_id=64&page=0&path=59_64&min_price=80&max_price=100 + добавил transition: 0.5s; но как мнее убрать появления из левого угла? просто появления надо
Не вижу ни transition ни появление из угла. У меня оно без transition и возникает сразу поверх фотографии. Кстати, так неправильно, вы должны слушать hover для обоих css правил на одном элементе, например: Код: .product-grid .image:hover{ background: url('../image/all.png') no-repeat; } .product-grid .image:hover img{ opacity: 0.2; } Кстати, если вы используете только отображение сеткой, найдите в коде страницы это: Код: if (view) { display(view); } else { display('grid'); } и замените на это: Код: display('grid'); А то у меня каким-то образом в localStorage записался list и теперь у меня в первом браузере, в котором я ваш сайт смотрел, на странице категории всё время каша, потому что товары отображаются списком, а не сеткой. Такое может повториться ещё у кого-нибудь из посетителей.