Transition between images on image hover for shopping cart

[alston]

Hello, I want to emulate this effect for a shopping cart:

[http://aviatornation.com/womens/tees] (http://aviatornation.com/womens/tees)

I want to do it with CSS transitions, using two separate product images for front and back of a product. The main image would be the front image, then on hover (without clicking at all) I’d like the image to transition in a linear fashion as the above sample.

Can someone please help me figure out how to set this up. My confusion comes from my site’s shopping cart allows product images uploaded through each product listing, I can load multiple images which become inline through the output of the cart’s code.

I’m thinking one way would be to have both front and back images loaded onto one image sprite, and only displaying on the multiple product listing page the front image, then on hover to transition the sprite so many negative pixels to the left to show the back image.

But, I’d rather not have to create a sprite for each image. Can I set this up to have the two separate images transition as in the top example?

[alston]

Hey Krish1980 what’s up, thanks for your response.

The output of this is generated from the cart component

<div id="redcatproducts">
<div class="category_box_outside">
    <div class="category_box_inside">
        <table border="0">
            <tbody>
                <tr>
                    <td colspan="2">
                        <div class="category_product_image">
                            <span class="productImageWrap" id="productImageWrapID_2">
                                <div>
                                    <a id="a_main_image2" title="Drink Hugger- Coronado Crab" href="">
                                        <img id="main_image2" src="" title="Drink Hugger- Coronado Crab" alt="Drink Hugger- Coronado Crab">
                                    </a>
                                </div>
                            </span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="category_box_outside">
<div class="category_box_inside">
    <table border="0">
    <tbody>
        <tr>
        <td colspan="2">
            <div class="category_product_image">
            <span class="productImageWrap" id="productImageWrapID_2">
                <div>
                <a id="a_main_image2" title="Drink Hugger- Coronado Crab" href="">
                    <img id="main_image2" src="" title="Drink Hugger- Coronado Crab" alt="Drink Hugger- Coronado Crab">
                </a>
                </div>
            </span>
            </div>
        </td>
        </tr>
    </tbody>
    </table>
</div>
</div>
<div class="category_box_outside"></div>
<div class="category_box_outside"></div>
<div class="category_box_outside"></div>
<div class="category_box_outside"></div>...

I feel like I would drastically need to alter the way the images are managed by the database when you create a new product and attach the images to it.

I could make it if I would writing the html, but not sure here…

Thoughts?

[Author]

Posts