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:
Ver original#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!