Hover dos imágenes

[metal1616]

Buenas señores y señoras.
Estoy intentando realizar un efecto hover que sea una jarra de cerveza vacía y cuando te pongas encima, se vaya rellenando de abajo a arriba.
La jarra es esta: http://image.spreadshirt.net/image-server/v1/designs/15673312,width=178,height=178/vaso-de-cerveza-con-espuma.png

Lo que busco es que simplemente cambie el color del contenido de la jarra a amarillo.
Lo he intentado hacer con dos imágenes y al hacer hover que se cambiara a la otra, pero no he sabido hacerlo.
¿Podrían ayudarme para ver de qué forma lo puedo hacer?
Gracias de antemano.

[pzin]

Bienvenido al foro.

¿Qué código has probado?

[Linton]

¿Algo como esto?

[metal1616]

Esto sería perfecto muchas gracias. Mi fallo era que en el html dentro del enlace metía la imagen con <img src....> en vez de meterlo desde el css como hizo linton.

Pzin sorry por no poner el código, pero probé tantas cosas que ya no sabía cuál era el último utilizado.

Ahora me gustaría saber si conocéis algún tipo de transition o algo parecido para que la segunda imagen fuera apareciendo de abajo hacia arriba como si diera la sensación de que se está llenando la jarra.

Lo que, ¿para el transition, tendríamos que declarar la segunda imagen en el div también y por ejemplo con una opacidad de 0% y ya en el hover meterle el transition?

Muchas gracias por vuestra ayuda.

[Linton]

Tal vez puedas sustituyendo la foto inicial por una animación GIF

Saludos.

[gPuon]

Podrías también intentar usando la propiedad transition de CSS3, hace un par de meses publique un pequeño tutorial sobre el tema y un ejemplo sobre el mismo.

Seguramente lo que yo te propongo es más complejo, pero igual puede interesarte conocer un poco sobre el tema.

[AitorDB]

Mmm... ¿qué tal si combinas lo que te dijo Linton con lo de gPuon? Me explico, muestras la imagen original (la jarra vacía) y al hacer un hover cambias esa imagen por el GIF de la jarra llenándose.

Código CSS:

#Jarra {
     background: url("JarraVacia.png");
}
 
#Jarra:hover {
     background: url("JarraLlenandose.gif");
}
 

Además podrías añadirles efectos de transición como bien ha dicho también gPuon para que sea más agradable a la vista.

Saludos!

[metal1616]

Muchisimas gracias, hice la combinación que comenta AitorDB y como dijo anteriormente Linton y funciona perfectamente, mejor de lo esperado!
En cuanto al transition lo estuve mirando en varios temas y tutoriales, pero no lo conseguí, pero gracias de todas formas Gpuon te agradezco la respuesta.
Saludos para todos e intentaré poner mi granito de arena en este blog.