Crossfade 2 Bilder mit CSS

Hallo,

ich möchte zwei Bilder ineinander übergehen lassen, als eine Art Hovereffekt.
Folgenden Weg habe ich mir dafür ausgesucht: http://www.cssreset.com/how-to-create-…s3-transitions/

Mein CSS sieht so aus:

#colophon .sponsor .sponsor_sgu {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 0 auto;
}


#colophon .sponsor .sponsor_sgu img {
    position: absolute;
    opacity: 1;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;  
    transition: opacity 1s ease-in-out;
}


#colophon .sponsor .sponsor_sgu img.sgu {


}


#colophon .sponsor .sponsor_sgu img.sgu:hover {
    opacity: 0; 
}


#colophon .sponsor .sponsor_sgu img.sgu_hover {


}

Und PHP:

<footer id="colophon" class="site-footer" role="contentinfo">
        <div class="sponsor">
            <div class="sponsor_sgu">
                <a href="http://sgu.de">
                    <img class="sgu_hover" src="<?php bloginfo('template_directory'); ?>/img/sponsor/sgu_hover.png" /> 
                    <img class="sgu" src="<?php bloginfo('template_directory'); ?>/img/sponsor/sgu.png" />
                </a>
            </div>
        </div>

Trotzdem klappt das Ganze nicht. Mir wird das Bild, was eigentlich unten liegen soll, die ganze Zeit angezeigt, das eigentliche Bild was oben liegen soll sehe ich gar nicht, und beim Hover passiert nichts.

Vielleicht kann mir ja jemand helfen.

Liebe Grüße

Danke für die Antworten. Ich hab es jetzt noch mal nach dem Bild von Dezanjo gemacht und es funktioniert. Besten Dank!
Der Ausschnitt vom Footer ist nicht vollständig und ich arbeite offline.