WinFuture-Forum.de: CSS - Bild mit Text Tansition - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

CSS - Bild mit Text Tansition


#1 Mitglied ist offline   ghosty 

geschrieben 04. September 2013 - 13:07

Hallo, ich sitze immernoch an meiner Buttontransition und komme gerade irgendwie nicht weiter. Ich habe folgenden Code: (Die ID-Bezeichnungen habe ich mir nicht ausgesucht.)
<!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

0

Anzeige



#2 Mitglied ist offline   Lindheimer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 269
  • Beigetreten: 28. Oktober 10
  • Reputation: 8
  • Geschlecht:Männlich
  • Wohnort:Rhein-Main

geschrieben 04. September 2013 - 15:25

So wie ich überdecken sich linkes und rechtes Element gegenseitig.
Die einzige Möglichkeit, die mir auf die Schnelle einfällt, ist das Ganze in ne Tabelle zu packen. Ich weiß, ist veraltet aber zumindest funktionierts.

<table id="Yolo">
<tr>
<td><a href="http://www.google.de" id="Ultrayolo"><img src="" width="300" height="75" alt="" id="Superyolo"/></a></td>
<td><a href="http://www.microsoft.de" id="MayCry">Hier ist es!!!</a><br /></td>
</tr>
</table>


Oder du baust das Ganze neu auf denn irgendwie steckt da der Wurm drin. Z. B. haben beide a-Tags dieselbe Breite wie das Eltern-div.

Dieser Beitrag wurde von Lindheimer bearbeitet: 04. September 2013 - 15:25

Zitat

Homer: „Warum passieren mir immer nur Dinge, die sonst nur dämlichen Menschen passieren?!“
0

#3 Mitglied ist offline   ghosty 

geschrieben 04. September 2013 - 16:03

Gut, jetzt sind sie nebeneinander. Sie haben zwar die perfekte Größe, jedoch sollen sie übereinander liegen, sodass, wenn ich auf das Bild gehe, auch die Schrift sich farblich verändert und wenn ich über die Schrift gehe, sich auch das ganze farblich verändert. Es soll praktisch ein Button mit einem Link sein, welcher sich verändert, egal, wo ich mit der Maus draufgehe. Und da soll ein Bild/Banner und eben ein kleiner Text enthalten sein. Aber das will alles nicht so, wie ich das will.
0

#4 Mitglied ist offline   Lindheimer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 269
  • Beigetreten: 28. Oktober 10
  • Reputation: 8
  • Geschlecht:Männlich
  • Wohnort:Rhein-Main

geschrieben 05. September 2013 - 09:23

Achso, also genau andersherum als ich dachte. Probiers mal mit z-index und position:relative. dann liegt der text immer über dem bild egal wo man mit der maus hinfährt.

#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;

	z-index: 1;		
	position: relative;
}

...

#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;

	z-index: 2;		
	position: relative;
}

Zitat

Homer: „Warum passieren mir immer nur Dinge, die sonst nur dämlichen Menschen passieren?!“
0

#5 Mitglied ist offline   ghosty 

geschrieben 05. September 2013 - 14:11

Hm... das ist trotzdem noch nicht übereinander. Ich weiß einfach nicht, was ich tun soll. Deine Lösung sah viel versprechend aus, aber das klappt nicht, obwohl es eigentlich müsste.
0

#6 Mitglied ist offline   Lindheimer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 269
  • Beigetreten: 28. Oktober 10
  • Reputation: 8
  • Geschlecht:Männlich
  • Wohnort:Rhein-Main

geschrieben 05. September 2013 - 14:55

Welchen Browser benutzt du denn? Bei mir mit dem IE 10 und mit Opera funktioniert das.

Zitat

Homer: „Warum passieren mir immer nur Dinge, die sonst nur dämlichen Menschen passieren?!“
0

#7 Mitglied ist offline   ghosty 

geschrieben 05. September 2013 - 18:45

Ich benutze Chrome. Aber bei IE und Firefox funktioniert es auch nicht. Ich weiß nicht, was ich falsch gemacht habe. :/

Dieser Beitrag wurde von ghosty bearbeitet: 05. September 2013 - 18:50

0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0