# Caption



## lolhonk (10. April 2013)

Hallo,

1. ich habe ein Bild und möchte dazu bei :hover eine caption einblenden. Wie bekomme ich das hin? Mein code funktioniert irgendwie nicht:


```
.galerie-bild-uebersicht img {
	width:100%!important;
	height:auto!important;
```


```
.galerie-bild-uebersicht caption {
	opacity:0;
```


```
.galerie-bild-uebersicht img:hover caption {
	opacity:1;
```

2. Kann ich eigentlich auch bei hover eines divs ein anderes div einblenden lassen? Also z.B. so:


```
.bild
.caption {
opacity:0;
}

.bild:hover caption {
opacity:1;
}
```

Das funktioniert nämlich leider so auch nicht?! Was mach ich falsch? 

LG


----------



## Jan-Frederik Stieler (10. April 2013)

Hallo,
falls du eine Klasse caption verwendest hast du überall den Punkt vor caption vergessen.
Aber grundsätzlich funktioniert das mit opacity natürlich.

http://jsbin.com/ayiwos/2

Viele Grüße


----------



## lolhonk (10. April 2013)

also wenn die klassen innerhalb des gleichen divs sind funktioniert es. Aber wenn ich bei div1:hover einen andere div-klasse einblenden will geht es nicht?!

Genau das gleiche wenn ich eben nicht bei .box:hover die caption möchte sondern bei 

.box img:hover

siehe: http://jsbin.com/ojalat/1


----------



## Jan-Frederik Stieler (10. April 2013)

Hi,
das kann so auch nicht gehen. Denn du sprichst eine ID an welche ein Kindelement von .box ist.
Das was du willst kannst du so nicht mit css realisieren da benötigst du Javascript.

Viele Grüße


----------



## lolhonk (10. April 2013)

also es ist nicht möglich ein div block für einen anderen div block als caption zu nehmen? sondern es muss immer ein kindelement sein?


----------



## hela (11. April 2013)

lolhonk hat gesagt.:


> also es ist nicht möglich ein div block für einen anderen div block als caption zu nehmen? sondern es muss immer ein kindelement sein?


Hallo,
falls du mit "_caption_" das HTML-Element mit diesem Namen meinst, dann ist das nicht möglich. Das caption-Element darf nur innerhalb einer Tabelle verwendet werden.

Wenn du aber nur den Titel des Bildes in einem nachfolgendem Geschwister-Blockelement während des hover-Zustandes anzeigen willst, dann kannst du das mit einem following-sibling-Selektor machen:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo: following-sibling selector</title>
    <style type="text/css">
      img + p {
        width: 350px;
        margin: 0;
        text-align: center;
        background-color: #eee;
        color: #000;
        opacity: 0;
      }
      img:hover + p {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <img src="http://placehold.it/350x150" alt="" title="" />
    <p>Bildtitel</p>
  </body>

</html>
```


----------



## Jan-Frederik Stieler (11. April 2013)

Hi,
ja, wie willst du den sonst das Element per CSS ansprechen. Es gibt ja in der Syntax nicht einfach sowas wie ein Target-Befehl.
Was du noch machen kannst ist das Captionelement relativ oder absolut zu positionieren.



> Wenn du aber nur den Titel des Bildes in einem nachfolgendem Geschwister-Blockelement während des hover-Zustandes anzeigen willst, dann kannst du das mit einem following-sibling-Selektor machen:


Das geht aber auch nur wenn die Elemente entsprechend logisch angeordnet sind.
Wenn du aber am anderen Ende der Seite eine Box hast welche du öffnen willst funktioniert das auch nicht mehr.

Aber, ohne den HTML-Quellcode kann ich das Konstrukt jetzt schlecht beurteilen.

Viele Grüße


----------



## hela (11. April 2013)

Jan-Frederik Stieler hat gesagt.:


> Das geht aber auch nur wenn die Elemente entsprechend logisch angeordnet sind.


Genau: Das Blockelement, das angezeigt bzw. versteckt werden soll, muss ein nachfolgendes Geschwisterelement des "hover"-Elements sein.


Jan-Frederik Stieler hat gesagt.:


> Wenn du aber am anderen Ende der Seite eine Box hast welche du öffnen willst funktioniert das auch nicht mehr.


Dann kannst du es eben relativ oder absolut positionieren!


Jan-Frederik Stieler hat gesagt.:


> Aber, ohne den HTML-Quellcode kann ich das Konstrukt jetzt schlecht beurteilen.


Stimmt, das kann ich auch nicht. Eigentlich ist es schade, dass der Fragesteller sich nicht die Zeit nimmt um ein paar Zeilen HTML mitzugeben. Dann wüsste man vermutlich auch was er eigentlich will.


----------



## lolhonk (11. April 2013)

Hi ihr beiden,

ich habs nun so wie vorgeschlagen über die span klassen versucht zu lösen. D.h.  mein caption ist in 
	
	
	



```
<span class="caption 1">text text text</span>
```
 Das Problem ist aber, dass ich noch ein zweites caption element einblenden möche. Also 
	
	
	



```
<span class="caption 2">Symbol</span>
```
Wie mache ich das? Wie kann ich zwei captions kombinieren?

wenn ich nämlich versuche beide einzublenden mit:


```
.bild:hover .caption1 . caption2 {opacity:1;}
```
****t das nur, wenn ich eine der caption weglasse (also nur caption 1 oder nur caption 2)


kann man die kombinieren?

Hier mal mein css code:




```
.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;
```


hier seht ihr das live Beispiel:

http://www.makro-treff.de/zircon3/gallerie-kategorien/makrofotografie

LG


----------



## Jan-Frederik Stieler (11. April 2013)

Hi,
du hast ein Leerzeichen nach dem Punkt zuviel.



> … . caption2



Grüße

PS: Deine Webseite hat die Divitis. Du solltest nach Möglichkeit auf Semantik beim schreiben von HTML achten und möglichst wenig Divs, welche keine semantische Funktion haben, verwenden.


----------



## lolhonk (12. April 2013)

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 (13. April 2013)

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 (22. April 2013)

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 (23. April 2013)

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


----------

