Hover

Hey! Folgendes möchte ich umsetzen: Ich möchte das ganze so bild - Wenn ich mit der Maus über das Bild gehe soll das Bild wechseln, ca. so: Das geht auch soweit sehr gut, ich habe es bis jetzt so umgesetzt:
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> mediaobergroup{ background-color: aliceblue; } .Instaaagran { } .Instaaagran:hover { background: url(/image/1.png) no-repeat; background-size:60px 80px; background-position:center center; } .TWIIII { } .TWIIII:hover { background: url(/image/2.png) no-repeat; background-size:60px 80px; background-position:center center; } .YYYTT { } .YYYTT:hover { background: url(/image/3.png) no-repeat; background-size:60px 80px; background-position:center center; } .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } .flex-container > a { background-color: white; width: 188px; height:200px; margin: 10px; transition:all 2.0s; font-size: 30px; background-size:160px 180px; background-position:center center; } </style> <div class="flex-container"> <a class="Instaaagran" href="http://instagram.com/playgalaxy"></a> <a class="TWIIII" href="http://twitter.com/playgalaxy_net"></a> <a class="YYYTT" href="http://youtube.com"></a> </div>