Hover

Hey! Folgendes möchte ich umsetzen: Ich möchtedas ganze so - 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:

Der hier verwendete Code

<style> .mediaobergroup{ background-color: aliceblue; } .Instaaagran { background: url(images/gravatar.png) no-repeat; } .Instaaagran:hover { background: url(https://basti1012.de/bilder/1.png) no-repeat; background-size:60px 80px; background-position:center center; } .TWIIII { background: url(images/gravatar.png) no-repeat; } .TWIIII:hover { background: url(https://basti1012.de/bilder/2.png) no-repeat; background-size:60px 80px; background-position:center center; } .YYYTT { background: url(images/gravatar.png) no-repeat; } .YYYTT:hover { background: url(https://basti1012.de/bilder/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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!