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

[admin]

Ist das alles an Code ? Gib mir mal die Link zu den Bilder ? Wir hatten das doch schon fertig du brauchtest doch nur bider ändern und verlinken. Naja gib mal links zu den Bildern und sag mal was passieren soll wenn man die Bilder hovert

[admin]

Hier das wahr es doch https://basti1012.bplaced.net/index.php?...name=Hover und verlinkt wahren die doch auch . Was bekommst du den jetzt nicht hin?

[admin]

Also wenn ich die Frage richtig verstehe meint Jakob eher, dass man jetzt bei klick auf sein Bild auf eine Website geleitet wird. Das machst du dann schon mit einem <a> Befehl, jedoch schließt du das </a> erst nachdem du zwischen rein dein <img></img> gemacht hast.

Z.B.:

Code:

<a href="https://www.google.com">
<img src="deinBild.png">
</a>

Falls du nicht das meinst, sorry, wollte nur auch mal versuchen zu helfen.