Ladenbesitzer
Mitglied
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>
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>
Zuletzt bearbeitet: