hover

[admin]

Hey!

Folgendes möchte ich umsetzen:
Ich möchtedas ganze so haben: http://prntscr.com/jwdnrt - Wenn ich mit der Maus über das Bild gehe soll das Bild wechseln, ca. so: http://prntscr.com/jwdo46

Das geht auch soweit sehr gut, ich habe es bis jetzt so umgesetzt:

Code:

   <style>


                         .Instaaagran {
                             width: 50px;
                             height: 50px;
                             background-size: 50px;
                             background: url(media/nice/colored/Instagram.png) no-repeat;
                             transition: 2.0s;
                           
                           }


                        .Instaaagran:hover {
                            background: url(media/nice/Instagram.png)
                                no-repeat;
                                background-size: 50px; }

                                          .TWIIII {
                                           width: 50px;
                                           height: 50px;
                                           background-size: 50px;
                           
                                              background: url(media/nice/colored/Twitter.png) no-repeat;
                                              transition: 2.0s;
                                                                         width: 50px;
                             height: 50px;
                             background-size: 50px; }


                                         .TWIIII:hover {
                                             background: url(media/nice/Twitter.png)
                                                 no-repeat;
                                                 background-size: 50px; }


                                                 .YYYTT {
                                                   width: 50px;
                                                   height: 50px;
                                                   background-size: 50px;
                           
                                                     background: url(media/nice/colored/YouTube.png) no-repeat;
                                                     transition: 2.0s; }


                                                .YYYTT:hover {
                                                    background: url(media/nice/YouTube.png)
                                                        no-repeat;
                                                        background-size: 50px; }


.flex-container {
 display: flex;
 justify-content: center;
 background-color: none;
   height: 10px;
}

.flex-container > div {
 width: 128px;
 margin: 10px;
 text-align: center;
 line-height: 100px;
 font-size: 30px;
  background-size: 50px;
}
</style>


<div class="obergeordneterflex">


   <div class="flex-container">
       <div class="Instaaagran"></div>
 <div class="TWIIII" href="http://twitter.com/playgalaxy_net"></div>
 <div class="YYYTT" href="http://youtube.com"></div>  
   </div>
 </div>

Jedoch habe ich keine Ahnung wie ich das ganze jetzt verlinken soll, dass wenn ich auf das Bild klicke ein Link sich öffnet. Wenn ich den <a> Tag nutze verschiebt sich das Bild.

Viele Grüße
Jakob