Antworten zum Thema „[CSS/HTML] bei :hover title im Bild anzeigen“

[ingvar]

Hallo zusammen,

ich hab grad n kleines Problem was da so aussieht:

ich möchte eine Gallerie auf eine Seite setzen bei der bei :hover der tittle angezeigt wird. jetzt habe ich das schon soweit für ein Bild geschaft.
hab mich dafür für die css und den HTML code an http://webventil.de/demos/html5/3/index.html orientiert. packe ich jetzt aber mehr Bilder in die Gallerie, so hab ich da alle <span class="caption"> in dem einen Bild und die anderen zeigt es mir gar nicht an.

hat da jmd eine Idee?
Danke schon mal, Gruß Ingvar
http://webventil.de/demos/html5/3/index.html
http://webventil.de/demos/html5/3/index.html

 

[simonpicos]

AW: [CSS/HTML] bei :hover title im Bild anzeigen

Also wie sieht es denn in deiner Gallerie aus? Sind die Bilder alle nebeneinander angeordnet, und werden dann jeweils verschoben? - In diesem Fall musst du die entsprechenden Captions natürlich auch an die jeweilige Position verschieben.
Oder löst du das ganze per opacity/z-index/sonstwas?

Live-version deines Versuches wäre sehr sinnvoll um dir helfen zu können.

 

[ingvar]

AW: [CSS/HTML] bei :hover title im Bild anzeigen

ich kanns grad nicht online stellen hab aber auf http://500px.com/Pixelkarton/favorites hab ich grad gesehen haben die das ganze ohne fade-in aber es wird was eingeblendet bei :hover.

Ich habe glaub ich nur die vergebung der klassen und id's falsch.
also jetzt grad ist das so:

<div id="gallerie">
 <div class="image"> 
     <a href="artur.html"><img src="artur.png" alt="Artur" id="bild"></a>
           <span class="caption">Artur</span>

im css habe ich:

#gallerie .image{
    /*border:rgba(0,0,0,0.5) 1px solid;*/
    height:140;
    width:100;
    display:block;
    overflow:hidden;
    /*padding:5px;*/
    position:relative;
    margin: 10px 10px 50px 10px;
    border:2px solid grey;
    content: attr(title);
}

#gallerie .image .caption{
    -moz-transition:margin-bottom;
    -moz-transition-duration:.5s;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition:margin-bottom;
    -webkit-transition-duration:.5s;
    -webkit-transition-timing-function:ease-in-out;
    background:rgba(0,0,0,0.5);
    bottom:0;
    color:rgba(255,255,255,1);
    display:block;
    font-size:14pt;
    left:0;
    margin-bottom:-28px;
    padding:2px;
    position:absolute;
    transition:margin-bottom;
    transition-duration:.5s;
    transition-timing-function:ease-in-out;
    width:100px;
}

#gallerie .image:hover .caption{
    margin-bottom:0;
}
#gallerie a{
    color:rgba(0,0,0,1);
    font-weight:bold;
    text-decoration:none;
}

Ich gehe einfach davon aus dass ich da was mit den class und ids ändern muss. bloss wo?

 

[simonpicos]

AW: [CSS/HTML] bei :hover title im Bild anzeigen

Und, wenn du mehrere Bilder in der Gallerie hast, dann werden immer alle titles bei einem bild angezeigt?
Vielleicht stimmt was mit der positionierung nicht... Kann ich jetzt schlecht sagen, du hast ja nur nen kleinen Teil des HTML codes gepostet. Vielleicht kannst du mir ja mal die entsprechenden Dateien per pn schicken?

 

[Myhar]

AW: [CSS/HTML] bei :hover title im Bild anzeigen

Warum verwendest du nicht Firebug, um dein Problem zu analysieren? Was vielleicht wirkt, als ob ich nur keine Lust habe, dir nicht zu helfen: Mit Firebug kannst du bestimmt auch selber schnell auf die Lösung kommen.
Du kannst im Firebug auch die Zustände für :hover anzeigen lassen. Dann musst du nur die einzelnen Eigenschaften überprüfen. Vielleicht wird ja irgendwo im CSS eine Eigenschaft wieder überschrieben? Oder die absolute Positionierung passt nicht ganz?