ul li hover mit transition

[Ladenbesitzer]

Hallo!

Ich möchte gerne gerne sechs Bilder in zwei Reihen anzeigen lassen.
Dazu habe ich eine ul li Konstruktion erstellt.
Soweit funktioniert das auch.
Jetzt soll für jedes Bild auch noch ein CSS Hovereffekt dazukommen.
Es soll von einem Bild in ein anderes übergeblendet werden.
Leider funktioniert das nicht so richtig.
Könnt ihr mir bitte helfen?
Ich habe noch Schwierigkeiten mit dem Kombinieren von Klassen in der CSS wie z.B. li.oben.
Angaben wie .oben oder .oben:hover funktionieren schon ganz gut.
Die Seite findet ihr unter www.wohlfuehlen-zuhause.de
ACHTUNG: Es geht um die Desktop Version, nicht die mobile Version

Die Klassen sind wie folgt definiert:
li{
color: white;
display: inline-block;
font: bold 14px Arial, sans-serif;
margin: 0px 0 0 0px;
padding: 0;
text-align: center;
width: 184px;
-moz-transition: all 2s ease-in 2s;
}
.oben{
position: absolute;
top: 0;
left: 0;
opacity:100;
-moz-transition: opacity 0.5s ease-in;
}
.oben:hover{
opacity:0;
}
.unten{
postion: absolute;
top: 0;
left: 0;
}
.li-text {
background:#000;
}
ul{
list-style: none;
margin: 0;
padding: 0 0 0px 0;
overflow: auto;
max-width:auto;
}
li.firstInLine
{
clear: left;
}

Der html Code für das erste Bild ist der folgende:
<ul>
<li class="firstInLine li-text"><a href="..." title="..."><img class="unten" src="..." alt="..."><img class="oben" src="..." alt="...">...</a></li>
...
</ul>

 

[LeCub]

wenn du die Bilder durch andere erstzen willst, wird das nicht mit CSS nicht gehen, da brauchst du JavaScript

 

[threadi]

Oder setz die Bilder als Hintergrundbilder ein, dann geht es auch per CSS.

 

[Tronjer]

Bei Background-Images aber vorzugsweise mit animation und keyframes statt transition.

 

[Ladenbesitzer]

Guten Morgen,
danke für eure Beiträge!

die Transition des Werts "opacity", mit dem ein Bild ausgeblendet wird und ein darunterliegendes zum Vorschein kommt, funktioniert ja soweit schon einmal über CSS.
Nur leider liegen die Bilder hier in Listen und ich weiss nicht genau wie ich diese ansprechen soll.
Als Resultat liegen die Bilder entweder aufeinander oben links in Ecke, oder übereinander (soll: aufeinander) in der Liste.

Das Kernproblem beginnt ab dem Punkt, wenn ich "li" bearbeite. Dieses wirkt sich auf andere auf der Seite vorhandene Listenelemente aus. Wie definiert man eine neue Liste?
Listen haben ja keinen Punkt davor, sind also keine Klassen.

PS: Ich habe den ersten Beitrag für bessere Lesbarkeit etwas entrümpelt

 

[Ladenbesitzer]

habs hinbekommen.
Der li klasse fehlte ein position:relative

Ich würde mich dennoch freuen, wenn es eine Lösung dafür geben würde, neue Listen zu erzeigen und anzusprechen

 

[MrMurphy]

Hallo

Ich würde mich dennoch freuen, wenn es eine Lösung dafür geben würde, neue Listen zu erzeigen und anzusprechen

Momentan ist es etwas schwierig dir zu folgen.

Was für neue Listen meinst du?

Gruss

MrMurphy

 

[Ladenbesitzer]

Hallo!

Ich möchte gerne eine neue Liste erzeugen, die ich per CSS definieren kann, ohne dass andere vorhandene Listen davon betroffen sind.

 

[MrMurphy]

Hallo

du musst der neuen Liste nur eine id geben, zum Beispiel

<ul id="neueliste">
   <li>Hamburg</li>
   <li>Berlin</li>
   <li>Köln</li>
   <li>München</li>
   <li>Hannover</li>
</ul>

Mit CSS kann du die Eigenschaften dann beispielsweise so erreichen:

ul.#neueliste {
   background-color: red;
}
ul.#neueliste li {
   padding: 5px;
}

Gruss

MrMurphy

 

[Ladenbesitzer]

Vielen Dank für die Mühe, die Idee und das konkrete Beispiel!

 

[Ladenbesitzer]

Und für li Listeneinträge dann einfach?

css:
li #neu {}

html:
<ul>
<li class="123", id="neu">...</li>
...
</ul>

 

[MrMurphy]

Ja, wobei eine id pro Webseite nur einmal im body-Bereich benutzt werden darf, class hingegen mehrfach.

Das Komma ist an der Stelle nicht zulässig, Attribute werden durch Leerzeichen getrennt.