Add hover effects to product image links?

Store Builder Questions
1

As previously confessed, my primary expertise is Wordpress and I am quite new to CS Cart. I’ve worked with Smarty Templates before but I wouldn’t claim to be an expert by any stretch. :smiley:



I spent a few hours trying to figure out how to assign a link hover class to products in grid view.



I added this link class to styles.css:


<style type="text/css"><br />
a.box:link, a.box:active, a.box:visited {padding:2px; border: 5px solid #0F004E;}<br />
a.box:hover {padding:2px; border: 5px solid #E36F1E;}<br />
</style>
```<br />
<br />
The template that I've chosen to modify is grid_list.tpl.  On this template, I've rearranged the text link and add to cart button to appear centered below the product image.  I've added this "box" link class to the link in the template but the only part that is affected is the empty space between the image and the product text link.  <br />
<br />
Here is the link reference from grid_list.tpl:<br />
<br />
```php
<a href="{$index_script}?dispatch=products.view&product_id={$product.product_id}">{include file="common_templates/image.tpl" image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type="product"}</td></tr><br />

```<br />
<br />
When I analyze this code using Firefox's Firebug, I can see that it refers to the space between product image and link text.  How can I alter this href to include the product image too so I can add "effects" to it?  If I am chasing the wrong mouse, someone please put me on the right trail.<br />
<br />
Thanks.
2

Maybe you will need to add a parent class or id to the a.box:hover like that:


#divname a.box:hover
3

Actually, the hover class works, in that it appears in the section that exists between the product photo and product text link. What I can’t seem to sort out is how to define the href so that the product image is part of it.



This is the link from the smarty template:



{include file=“common_templates/image.tpl” image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type=“product”}



The href ends just before the {include file=“common…



I’ve tried this, which creates the box in the blank area between product image and text link:

{include file=“common_templates/image.tpl” image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type=“product”}



And this, which merely put a “> before text link:





And a few other things that failed… :frowning:

4

Would be better to see the site, but where is your closing tag?


{include file="common_templates/image.tpl" image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type="product"}
5

Here is the link to the site with the hover class limping:



[url]http://mildlymystified.com/cscart/index.php[/url]



Here is a link to the shopperpress site that shows what we’re going for:



http://affiliatecashtoday.com



Thanks, in advance, for taking a look.

6

Here is the link reference on the “limping” site;



{include file=“common_templates/image.tpl” image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type=“product”}

7

One way to do this is to just change the style sheet an no other code. I’m not exactly sure if it gets you what you want, but it does have the effect that is in your example site.



To create a border and hover for images like your featured products all you need to do is:



In your styles.css add:


.product-image a img {
border:5px #000000 solid;
}
.product-image a img:hover {
border:5px #C00 solid;
}



Or better yet, you could use the my changes addon to do this without actually messing with the code.



If you want to do it for more images you would just change the css for them as well.



You can see this work at:



[url]http://www.jandkonline.com/cscart[/url]



I hope this helps,



Brandon

8

2 new lines of CSS are not intimidating to me. Thanks for the help. I knew I was making it too hard. :smiley:

9

Try this simple…CSS Image Hover Effects



Chris