- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Back End’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi experts!
I built my site in Magento and I want to do something like the grid product images in http://www.cargoh.com/ but using CSS.
So I simply use the NIR method for CSS image replacement with pseudo-elements.
.products-grid li.item a{
overflow:hidden;
padding:0;
margin:0;
width: 180px;
height:150px;
}
.products-grid li.item a:hover:before {
content:url(../images/image.gif);
display:inline-block;
display:-moz-inline-box; /* for Firefox 1.5 & 2 */
font-size:0;
line-height:0;
My image is one color background. How can I get some attributes such as price and name of the product to make them appear over my rollover image?
getProductUrl() ?>" title="stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
getProductUrl() ?>" title="stripTags($_product->getName(), null, true) ?>">productAttribute($_product, $_product->getName(), 'name') ?>
getAvtor() ?>
getPriceHtml($_product, true) ?>
Many thanks!
OK, so after adding a span class “target” I’ve tried this code:
.products-grid .price-box .price {
font-size: 12px;
font-weight: normal;
padding-left: 10px;
visibility:hidden;
}
.products-grid .item:hover .target .price {
color:#f3f3cc;
visibility:visible;
}
The problem is that when the mouse is over the attribute text the rollover image and link disappear. Can I do something with target pseudo class? I really can’t find the issue.