Caption

[lolhonk]

Hi,

auf meiner Seite hatte ich das leerzeichen nicht drinne dort sieht der Code so aus:

.caption-bewertung {
    margin-left: 160px;
    margin-top: -20px;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.caption {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    font-size: 1em;
    margin-left: -121px;
    margin-top: -21px;
    opacity: 0;
    padding: 10px 5px;
    position: absolute;
    text-align: left;
    transition: all 0.6s ease 0s;
    width: 233px;
    z-index: 1;
}
.galerie-bild-uebersicht:hover p {
    opacity: 1;
}
.galerie-uebersicht-grid:hover .caption .caption-bewertung {
    opacity: 1;

aber nur wenn ich entweder:

.galerie-uebersicht-grid:hover .caption-bewertung {
    opacity: 1;

oder

.galerie-uebersicht-grid:hover .caption {
    opacity: 1;

nehme funktioniert es wenn ich beide kombiniere:

.galerie-uebersicht-grid:hover .caption .caption-bewertung {
    opacity: 1;

seh ich nichts bei :hover? Schreibt man das in css irgendwie anders wenn man mehrere klassen kombiniert? mit + oder so? ODer woran liegt es?


Update:

wenn ich es untereinander schreibe funktioniert es, aber es muss doch möglich sein das in einen Befehl zu packen:

.galerie-uebersicht-grid:hover .caption {
    opacity: 1;

.galerie-uebersicht-grid:hover .caption-bewertung {
    opacity: 1;

LG


ps. Danke für dein Hinweis mit den Divs ;-)

 

[Jan-Frederik Stieler]

Hallo,
ich glaube du hast das System Kind und Elternelement noch nicht so ganz verstanden.

.galerie-uebersicht-grid:hover .caption .caption-bewertung {
opacity: 1;
}

muss .caption ein Kind von .galerie-uebersicht-grid und .caption-bewertung wiederum ein Kind von .caption sein.

So wie du das willst musst du das so schreiben

.galerie-uebersicht-grid:hover .caption,
.galerie-uebersicht-grid:hover .caption-bewertung {
opacity: 1;
}

Und du soltest dir auch noch einen Text zu Selektoren (verschachtelte Selektoren) durchlesen, denn dann wäre die Frage mit dem Pluszeichen nicht aufgekommen.

http://www.css4you.de/wscss/css04.html

Viele Grüße

 

[lolhonk]

Hi,

sorry dass ich den Thread nochmal aufreisse, hatte mir bei der Umsetzung leider keine Gedanken gemacht inwiefern das Ganze mit IE10 und Chrome (26) aussieht. Der

transition

bzw.

transform: scale(1.02)
-webkit-transform: scale(1.02);

funktiniert mit Chrome irgendwie nicht bzw. nur Buggy (es verschiebt ständig alles). Beim IE klappts aber leider ist das Caption total verschoben. Weiß jemand an was das liegen könnte?

die url nochmal : http://makro-treff.de/zircon3/galerie-kategorien/makrofotografie

 

[Jan-Frederik Stieler]

Hi,
scale funktioniert, soviel ich weiß nur auf Block-Elementen.
Falls du einen Link hast dann verwende display: block; oder ähnliches.

http://jsbin.com/ajigut/1

Viele Grüße