Caption

L

lolhonk

Mitglied
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:

Code: 
.galerie-bild-uebersicht img {
	width:100%!important;
	height:auto!important;
Code: 
.galerie-bild-uebersicht caption {
	opacity:0;

Code: 
.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:

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

.bild:hover caption {
opacity:1;
}

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

LG
 
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
 
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
 
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?
 
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?
Zum Vergrößern anklicken....
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:
HTML: 
<!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>
 
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:
Zum Vergrößern anklicken....
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
 
Jan-Frederik Stieler hat gesagt.:
Das geht aber auch nur wenn die Elemente entsprechend logisch angeordnet sind.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
 
Hi ihr beiden,

ich habs nun so wie vorgeschlagen über die span klassen versucht zu lösen. D.h. mein caption ist in
Code: 
<span class="caption 1">text text text</span>
Das Problem ist aber, dass ich noch ein zweites caption element einblenden möche. Also
Code: 
<span class="caption 2">Symbol</span>
Wie mache ich das? Wie kann ich zwei captions kombinieren?

wenn ich nämlich versuche beide einzublenden mit:

Code: 
.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:



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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück