Jquey: boton con dos imagenes y pie

[topo87]

Hola!

Que tal? Hace un rato estoy tratando de sacar algo y no me sale.... Queria ver si alguno me podria ayudar.. Tengo un boton hecho en flash, pero me gustaria pasarlo a HTML+Jquery...

La idea es la siguiente....

De fondo hay una foto... Y arriba hay una foto igual pero azulada. Cuando hago over en la foto azulada, se va a 0 el aplha (para que tenga un fecto de que adquiere color) y sale un pie con informacion.
Van a haber varios de estos botones conviviendo juntos.



Ahora bien, en el head llamo al jquery.. y al script q toy haciendo

Código:

<script src="lib/js/jquery.js" type="text/javascript"></script>
<script src="lib/js/hover.js" type="text/javascript"></script>

este es el script JS

Código:

$( function (){
       
			 
			var img = $('.imgTrabajo', this);
			var desc = $('.trabajoDescripcion', this);
			var descH = desc.height();
			img.css({opacity: 1});
			desc.height(0);
			$('a', this).hover(function() {
				img.stop().animate({opacity: 0});
				desc.stop().animate({height: descH});
			}, function() {
				img.stop().animate({opacity: 1});
				desc.stop().animate({height: 0});
			});
				

				
				
})

Este el html :

Código:

<div class="col-izq">
                    <div class="trabajo, borde-gris">
                              <a class="linkTrabajo" style="background:url(img/bt/buen_suceso_over.jpg)" title="Buen Suceso" href="http://www.ejemplo.com.ar/"><img src="img/bt/buen_suceso.jpg" alt="Buen Suceso" class="imgTrabajo"/></a>
                            <span class="trabajoDescripcion">Buen Suceso</span>
                    </div>
</div>

Y este el css

Código:

.col-izq {
	width:330px;
	height:auto;
	float:left;
}

.borde-gris { border:2px solid #434343; }

.trabajo {
	width: 326px;
	height: 146px;
	overflow: hidden;
}

.linkTrabajo {
	display:block;
	width:326px;
	height:146px;
}

.trabajoDescripcion {
	display: block;
	width: 326px;
	height: 35px;
	position:relative;
	background: #fff;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	line-height: 35px;
	text-align: right;
}

Basicamente la idea es... que el over me baje a 0 el alpha de la foto azulada, dejando ver el fondo del link que es la foto a color, y a su vez, el span que es el pie... ponerlo fuera del div trabajo.. escondiendolo con el overflow y haciedo que suba unos pixeles.


Espero que se haya entendido, muchas gracias!

Saludos

PD: El problema que tengo es que si pongo dos botones juntos al hacer over en 1, efectua la animacion en los dos (antes no me pasaba.. nose q toque, ya estoy mareado jeje). Y el otro, es que no se como resolver el tema del pie

[topo87]

Solucionado, muchas gracias de todas formas...