<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css" type="text/css" /> </head> <body> <div id="Yolo"> <a href="http://www.google.de" id="Ultrayolo"><img src="" width="300" height="75" alt="" id="Superyolo"/></a> <a href="http://www.google.de" id="MayCry">Hier ist es!!!</a><br /> </div> <div id="FiveGum"> <a href="http://www.google.de" id="Ultrafivegum"><img src="" width="300" height="75" alt="" id="Superfivegum"/></a> <a href="http://www.google.de" id="Baum">Hier ist es nochmal!!!</a><br /> </div> <div id="Merci"> <a href="http://www.google.de" id="Ultramerci"><img src="" width="300" height="75" alt="" id="Supermerci"/></a> <a href="http://www.google.de" id="Cryball">Und nochmal!!!</a><br /> </div> <br /><br /> </body> </html>
Und das ganze habe ich dann in CSS folgendermaßen gestaltet:
#Yolo { width: 850px; height: 150px; } #FiveGum { width: 850px; height: 150px; } #Merci { width: 850px; height: 150px; } #Ultrayolo { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; float: left; } #Ultrayolo:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; border-bottom: 3px solid black; } #Ultrafivegum { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; float: left; } #Ultrafivegum:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; border-bottom: 3px solid black; } #Ultramerci { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; float: left; } #Ultramerci:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 20px; margin-right: 20px; display:block; } #MayCry { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; border-bottom: 3px solid black; } #MayCry:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; border-bottom: 3px solid black; } #Baum { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; border-bottom: 3px solid black; } #Baum:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; border-bottom: 3px solid black; } #Cryball { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 850px; height: 100px; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; } #Cryball:hover { background: #16181e; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; font-family: Arial; font-size: xx-large; padding-top: 70px; padding-left: 400px; margin-top: 20px; display:block; } /* #Superyolo { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 300px; height: 75px; font-family: Arial; font-size: xx-large; padding-top: 30px; padding-left: 30px; margin: 20px; float: left; } #Superfivegum { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 300px; height: 75px; font-family: Arial; font-size: xx-large; padding-top: 30px; padding-left: 30px; margin: 20px; float: left; } #Supermerci { background: none; text-decoration: none; color: #aaaaaa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 300px; height: 75px; font-family: Arial; font-size: xx-large; padding-top: 30px; padding-left: 30px; margin: 20px; float: left; } */
Das Ergebnis des ganzen ich zwar schon recht gut, jedoch will ich, wenn man mit der Maus über das Bild fährt, dass das ganze genauso aussieht, wie wenn ich mit der Maus über die Schrift geht. Ich habe schon lange rumgetüftelt, aber es wird nichts. Ich wäre sehr dankbar, wenn mir jemand einen Lösungsansatz präsentieren könnte.
Mfg ghosty
Dieser Beitrag wurde von ghosty bearbeitet: 04. September 2013 - 13:08