How to show only image in homefeatured and hover the rest

[generalexperts]

I am trying to make a modification to my home featured products. I would like to have it only show a large picture of the product and have the rest show up when the cursor hovers over the product block.

 

I've tried to change the tpl to show a larger image. This works, but it changes the position of "s_title_block" "product_desc" "price_container" "price."

 

I'd like those to show up when I hover over the image.

 

Thank you!

Edited July 10, 2014 by generalexperts (see edit history)

[dioniz]

If you want to show bigger image and not losing other stuff you need to open modules/homefeatured/homefeatured.css and find

#featured-products_block_center li {
    background: url("http//www.savvymarina.com/modules/homefeatured/img/bgimg.jpg") no-repeat scroll center center #FFFFFF;
    border: 10px solid #FFFFFF;
    box-shadow: 1px 1px 2px #E6E6E6;
    cursor: default;
    float: left;
    height: 200px;
    margin: 10px;
    position: relative;
    text-align: center;
    width: 300px;
}

remove height.

 

To hide other stuff add display:none; to s_title_block, product_desc, price_container ...

You dont have some of those elements in css so you must make them

 

Then to display them on hover you need to add classes like this for every element:

.ajax_block_product:hover s_title_block{
   display:block;
}

Edited April 25, 2014 by dioniz (see edit history)