Mouseover con imagen

[gundimauro]

Chicos, Buenas Tardes.


Necesito de los expertos ya que estoy trabado en algunas cosas


Estoy rediseñando una web y no puedo con lo siguiente:

Quisiera agregar filtros a productos como esta pagina:

http://www.jansport.com/shop/en/jansport-us/shop/everyday-bags/backpacks

y al pasar el mouse en los colores que cambie con el efecto de color:

http://www.jansport.com/shop/en/jansport-us/shop/everyday-bags/backpacks.


Podrian ayudarme? busque y busque intente con Jquery, con los codigos pero me es imposible. La estructura del HTML es la siguiente:

Código HTML:

<!-- PRODUCTOS -->

				<div class="catalog_item top_filter_4_cols_template">


<!-- producto accion -->
<div class="product_imgFull">
	<figure class="#">


				<a href="#"><img src="../shop/img/catalogo/catbusiness/FSN10N-N.jpg" alt="BUSINESS 10 SIMIL NEOPRENE"/></a>


			<div class="product_actions">

				<a href="#" class="secondaryAction hopup-js"><span class="quick-view-text">VER MAS</span></a>
			</div>

	</figure>
</div>
<!-- fin producto accion-->

<!-- DESCRIPCION-->
					<div class="catalog_item_details">
						<h1><a href="#">10" SIMIL NEOPRENE</a></h1>
						<div class="product_price">

				<span id="price" class="offer">
					$99.90

				</span>

<!-- colores-->

</div><div class="color_swatch_container">
							<div class="carousel_js">


										<!--  display color swatches -->
											<img src="../shop/img/catalogo/colores/negro.jpg" class="attr_box" alt="NEGRO">

											<img src="../shop/img/catalogo/colores/rojo.jpg" class="attr_box" alt="ROJO">

											<img src="../shop/img/catalogo/colores/azul.jpg" class="attr_box" alt="AZUL">






							</div>
						</div>

					</div>
				</div> 

Mil Gracias!