• Options
• Anmelden
• Registrieren
• Desktop Style
• Accelerated Mobile Pages Theme

Hover

• Index

  • Soforthilfe-forum
  • Soforthilfe Foren
  • HTML
  • Hover
• Hover

• Hover

  Jakob2608 > 18.06.2018, 17:49

  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

• RE: Hover

  basti1012 > 18.06.2018, 20:09

  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

• RE: Hover

  basti1012 > 18.06.2018, 20:11

  Hier das wahr es doch https://codepen.io/basti1012/pen/eKegoj?editors=1100 und verlinkt wahren die doch auch .Was bekommst du den jetzt nicht hin ?

• RE: Hover

  waermeflasche > 19.06.2018, 01:05

  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.
• Ein Thema zurück Ein Thema vor