Change style of Products in Product-list

[generalexperts]

I am trying to change the style of how my products appear on my product list. Right now the design isn't what I am going for. My site is http://tinyurl.com/lph6sm3  Check out the products page and you will see that when you hover over a product it shows the background transitions darker (which I like), however, the add to cart button is there and needs to be deleted. How do I properly delete the Add to cart button off the product list?

 

The view button I'd like in the top right corner and appear when the mouse hovers over the product. Also I'd like the borders to appear darker (like I have now, but just the borders) for the transition.

 

Below: My products, shown with no hover effect. (Go to site to view current hover effect)

 

Below: Showing the effect I'm looking for when hovering over the product. I'd like the border gray  and fade darker and the view button to appear, with the entire product area click-able to view product details. (IF you can help with any aspects of this please let me know!!) Thanks!

Edited October 1, 2014 by generalexperts (see edit history)

[tmk]

To remove "Add to cart"

add in 

product_list.css:261

#product_list li .ajax_add_to_cart_button

display: none;

 

 

The images You attached are the same so hard to imagine what effect You want to achieve.

 

 

Position of View button:

product_list.css:89

#product_list li .viewbutton

 

bottom: ...px;  - is Your position from bottom

Edited April 4, 2014 by tmk (see edit history)

[generalexperts]

I removed the "add to cart" button. Is this the appropriate way of removing it. Or is there more in other files?

 

How do I make the entire product area link to view the product? instead of how it is now where you have to click on the view button.

[tmk]

This is the simplest way, another is removing or commenting code generating this link:

 

<a class="cartbutton button ajax_add_to_cart_button exclusive" href="http://www.savvymaf47506b9fa8073eb12dd3687b50d" rel="ajax_id_product_15" title="Add to cart">ev
<span/>
</a>

 

you should find in product-list.tpl of Your template

 

Which one is more appropriate is up to You.

 

 

Also in this file You find code generating 

<div class="viewbutton">

and the link inside which is the view button

You could figure out how to make this div a link

 

or 

 

You could try achieve similar effect changing in:

product_list.css:101

#product_list .button

 

height: 22px; to 220px

Edited April 5, 2014 by tmk (see edit history)

[generalexperts]

Anyone know how to make the shading box around my product (when looking at the product list). When viewing now the whole thing is shaded. Can someone help me on how to get that hover effect?  (shown in the img in post 1) Thanks!

[generalexperts]

I was able to get the background to show an overlay effect. Looking to have it not overlay the entire product image. Is this possible? Still looking for the effect from the first post.

Thanks!