[erledigt] teilweiser hovereffekt bei bildern

[sepp_a_u]

hallo zusammen,

ich habe eine Frage: Wie macht Apple solch einen teilweisen Hover-Effekt wie bei Apples Bildern ganz unten auf der Startseite http://www.apple.com/? Wenn man dort mit der Maus über eines der 4 Bilder unten geht, wird dieses unten etwas grau hinterlegt. Ist das ein Bild oder ist das per CSS gelöst?

Viele Grüsse u Danke,
David

[schman]

Ich habs mir nicht genau angeschaut, aber ich würde hier einfach das Hingergrundbild ändern. (also transparent, auf eines mit grauem Hintergrund). Oder noch einfacher via CSS3 Gardients (Verlauf).

[Skipman]

Die machen das so:

.promos ul li a:hover {
    background: -moz-linear-gradient(center top , #F9F9F9 50%, #E0E0E0 100%) repeat scroll 0 0 transparent;
}

Hat halt den Nachteil, dass es nur in den neueren Browsern (CSS3-fähige) funktioniert (siehe w3schools-Browsersupport.

[sepp_a_u]

Die machen das so:

.promos ul li a:hover {
    background: -moz-linear-gradient(center top , #F9F9F9 50%, #E0E0E0 100%) repeat scroll 0 0 transparent;
}

Hat halt den Nachteil, dass es nur in den neueren Browsern (CSS3-fähige) funktioniert (siehe w3schools-Browsersupport.

ok danke das passt schon mit den css3-fähigen browsern. problem ist jetzt nur, dass der effekt sich nich tüber die bilder legt, sondern nur ganz kurz unten erscheit und wohl hinter dem bild zum tragen kommt...habe folgenden code eingefügt:

.ce_image.g4 a:hover {
    background: -moz-linear-gradient(center top , #F9F9F9 50%, #E0E0E0 100%) repeat scroll 0 0 transparent;;
}

[Andreas]

Gib den As und IMGs besser noch display:block;

.image_container a,
.image_container img {
  display: block;
}

[sepp_a_u]

Gib den As und IMGs besser noch display:block;

.image_container a,
.image_container img {
  display: block;
}

hmm bringt leider auch nichts. der hover-effekt will dennoch nicht erscheinen...

[Andreas]

.image_container musst du natürlich entfernen, wenn deine As und IMGs da nicht drin sind. Ist das eine Contao Navigation? Dann gib den SPANs und As das display:block.

[sepp_a_u]

nee die sind schon in nem image_container.
es geht um die 4 bildchen ganz unten auf der startseite. würde dafür folgenden code verwenden:
http://www.beerpong.de/de/home.html (admin ¦ b33rpong)

.ce_image.g4 a:hover {
    background: -moz-linear-gradient(center top , #F9F9F9 50%, #E0E0E0 100%) repeat scroll 0 0 transparent;;
}

wenn ich den mal bei firebug so eingebe, dann erscheint der hovereffekt aber nur ganz unten schmal bei den bildern und legt sich wohl hintendran.

für "a img" hab ich bereits einen code:

a img {
    display: block;
}

irgendwie muss ich ja eigentlich "nur noch" den hovereffekt auf die bilder legen und nicht dahinter...

[Andreas]

Bei apple, das sind transparente Bilder, deshalb siehst du da natürlich den Hintergrund des As überall dort, wo das Bild transparent ist. Setze mal zum Spaß dein IMG auf display:none, dann siehst du auch den Hovereffekt.

Ich sehe da jetzt für dich zwei Lösungen.

1. Das A auf position:relative, damit du das IMG darin zum A absolut positionieren kannst und dann dem IMG noch ein z-index von -1, damit es hinter das A rutscht. Dabei musst du dem A aber noch Breite und Höhe geben, da es keine Ausdehnung mehr hat, sobald das IMG position:absolute hat.

2. Mit JS ein DIV ins A generieren, welches du dann darin absolut positionierst und als Layer über das IMG legst. (ne Templateänderung fände ich da persönlich zu aufwendig)

[sepp_a_u]

Hallo Andreas,

danke soweit. Wenn ich dich also richtig verstanden habe, dann sollte der Code in etwa so aussehen, oder?

.ce_image.g4 .image_container a {
    position: relative;
    width: 300px;
    height: 155px;
}
.ce_image.g4 .image_container a img {
    position: absolute;
    z-index: -1;
}

[Andreas]

Ja, genau. Und display block nicht vergessen.

[sepp_a_u]

stimmt genau...das display:block habe ich vergessen bei dem code für "a". jetzt funktioniert der hover effekt auch. problem dabei ist jetzt nur, dass der hover-effekt sich über das ganze bild legt und nicht nur ganz leich über das untere...geht also irgendwie gar nicht oder?

[Andreas]

Irgendwie kann ich da auf deiner online-Seite nie deine Änderungen sehen. Wenn man dann noch wüsste, was du mit 'ganz leicht über das untere' meinst, könnte ich vielleicht helfen. Wenn du einfach nur transparente Farbwerte brauchst, dann nimm rgba() anstelle von hex-Werten. rgba(255, 0, 0, .5) ist zum Beispiel Rot 50% transparent.

[sepp_a_u]

Irgendwie kann ich da auf deiner online-Seite nie deine Änderungen sehen. Wenn man dann noch wüsste, was du mit 'ganz leicht über das untere' meinst, könnte ich vielleicht helfen. Wenn du einfach nur transparente Farbwerte brauchst, dann nimm rgba() anstelle von hex-Werten. rgba(255, 0, 0, .5) ist zum Beispiel Rot 50% transparent.

hatte die änderungen bisher immer nur per firebug mal probiert. habe es jetzt fest drin.
mit "ganz leicht" meinte ich so wie bei apple eben...das nur ein unterer teil leicht gehovert wird von dem effekt.

[Andreas]

So in der Art
-moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 0, 0, .5))
Habs mal Rot gemacht, damit du es besser siehst. Musst du ein wenig mit experimentieren. 'transparent' als ersten Wert liefert irgendwie nicht das gewünschte Resultat, rgba(255, 255, 255, 0) ist da irgendwie besser.

[sepp_a_u]

so da es nun im FF läuft ist die frage, wie ich es für die anderen browser zum laufen bringe. habe einige css3-seiten abgeklappert aber nicht gefunden wie die anweisung für chrome, safari, opera, ie aussehen muss, damit es läuft.
spreche hierbei von folgendem code:

-moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 0, 0, .5))

kann mir da jemand helfen?

[Andreas]

Du kannst Contao als CSS3-Generator benutzen, einfach eine CSS mit Contao erstellen, Dummy-Selektor erstellen '#myBack', Hintergrund einstellen, Datei einsehen. Dort müssten die Variationen für unterschiedliche Browser drin enthalten sein. Evtl. noch die Farbwerte einfach mit den rgba() Werten ersetzen.

[sepp_a_u]

kannst du das noch etwas ausfürhlicher beschreiben? habe noch nie mit dem contao css editor gearbeitet, daher keine ahnugn wie ich das machen muss.

habe folgende schritte schonmal gemacht

• neues stylesheet angelegt
• neuen selektor angelegt
• im selektor mal hintergrund aktiviert

weiter bin ihc bisher noch nicht gekommen, weil ich nicht genau verstehe was du mit

Hintergrund einstellen, Datei einsehen. Dort müssten die Variationen für unterschiedliche Browser drin enthalten sein. Evtl. noch die Farbwerte einfach mit den rgba() Werten ersetzen.

meinst...

[Andreas]

Wenn du ein neues Stylesheet angelegt hast z.B. 'meinCSS' und darin eine CSS-Rule 'Formatdefinition' angelegt hast. Beim Hintergrund halt ein paar Einstellungen vornehmen, das müsste auch im Handbuch stehen. Dann speichern und die Datei ansehen, müsste in ROOT/system/scripts/ liegen meinCSS.css.

[sepp_a_u]

hat jetzt zwar nicht geklappt mit dem internen css editor aber man kann auch einfach das -moz- durch -webkit- ersetzen, dann geht das auch