méthode simple non-couché pour appliquer un div comme un mouseover fadein 100% largeur légende

Question

Le titre dit à peu près tout. Il y a des tonnes de scripts qui le font, mais la plupart d'entre eux sont tellement gonflés et finissent par gâcher le script, et utilisent simplement les informations des balises alt. Mon script se présente comme suit:

<ul> 
    <li style="display:block"> 
      <img src="images/portfolio/talktostrangers/1.jpg" /> 
       <div class="caption"> 
       <span class="projecttitle">Talk to Strangers</span>A social awareness campaign that proposes people talk to strangers on trains, subways, elevators, & the like. 
       </div> 
    </li> 
</ul> 

L'aperçu peut être consulté ici pour avoir une idée de l'endroit où il ira: http://www.studioimbrue.com/beta

Answer 1

Si je comprends bien, vous voulez juste la légende de montrer en vol stationnaire sur une image. La meilleure façon de le faire est avec javascript. Je recommande d'utiliser un framework js, comme jQuery, ce qui le rend vraiment facile. Vous pouvez simplement inclure le code source de jQuery et le mettre dans une balise de script ou un fichier externe dans la tête de votre document. Ensuite, il s'agit du style CSS, de l'opacité, de la couleur d'arrière-plan et de la couleur du texte. Dépend de vous.

En ce qui concerne la largeur de 100% dans le titre de votre question, parce que c'est dans un tag DIV, il devrait remplir automatiquement 100% de son parent, le LI.