Souci de eight pour overlay

Bonjour,

La hauteur de ton image est d'environ 40% de sa largeur, on peut donc se servir de padding verticaux exprimés en % pour insérer un élément qui prendra la hauteur de celle-ci en fonction de la largeur.

Ta structure se présente bien pour ce genre de chose.
http://codepen.io/gc-nomade/pen/letdh
L’idée est d’insérer un pseudo-element en inline-block avec un padding vertical de 40% au total. En prime, on le met en vertical-align:middle, ce qui aura pour effet de center verticalement ton span.
Modifié par gc-nomade (11 Feb 2014 - 18:09)

Hello,
Merci pour ta réponse.
N'y a t-il pas plus simple (et surtout, plus précis) que de créer un padding vertical pour donner une référence à suivre à l'overlay ?
Ps : je ne comprends pas pourquoi tu as modifié autant de choses (couleur, texte, etc.)
Tu peux me montrer ce que ça donnerait avec juste le padding en plus ? L'idée étant d'avoir une image "totalement d'origine" sur laquelle on retrouve des infos (légende) quand on scroll dessus.
Merci encore en tout cas
Tico

Edit : on vient de me faire ça et ça correspond parfaitement : http://codepen.io/anon/pen/csILb

Qu'en penses-tu ?
Modifié par Tico (12 Feb 2014 - 02:11)

c'est la bonne vielle version en absolute , qui demanderas un réglage sitôt que le texte deviendras plus important ou plus gros/petit.

Pour mon exemple, les truc en trop tu les enlèves , c'est fait pour mettre des comportement en evidence. Codepen (ou similaire) a cela de bien, c'est qu'il te permet de 'jouer' avec le code, de le comprendre et de te l’approprier.

L'important n'est pas forcement l'une ou l'autre des solutions, c'est surtout que tu comprennes comment fonctionne celle que tu choisis et quelle s'integre à ta page finale.

Bonne journée

Merci encore pour ta réponse.
Bonne journée à toi,
Tico

Je me permet de re-poster car j'ai quelques micro questions,

1/ pour chipoter un petit peu, il y a quelques pixels de l'overlay qui dépasse en bas, comment faire pour les enlever ?

2/ Et aussi, très étrange pour le coup, l'image est un poil plus contrasté que celle de base, y a t-il quelque chose qui a été ajouté ?

3/ Et comment faire pour régler le temps d'apparition/disparition de l'overlay quand on scroll dessus ? Je trouve ça un peu trop "sec" comme ça.

4/ Puis le plus important, le texte (quand on en met beaucoup) sort complètement de l'image et de l'overlay, comment le cadrer dedans tout en le laissant responsive ?

http://codepen.io/anon/pen/csILb

Merci
Modifié par Tico (13 Feb 2014 - 20:30)

chercherais tu un résultat comme celui-ci ? http://codepen.io/anon/pen/aeFhB
(je reprend ma base, car je ne suis pas fan de l'absolu , à moins que ton image vehicule une information, dans ce cas garde la dans le HTML avec le alt=" information que vehicule l'image"
Modifié par gc-nomade (13 Feb 2014 - 21:51)

Oui là c'est top! Qu'est-ce que tu n'aimes pas dans l'absolu ? J'essaye de comprendre.
Seul bémol, quand on redimensionne le navigateur (et donc l'image), le texte sort en haut et en bas de l'image. Comment faire pour qu'il n'en sorte pas mais rétrécisse à la place ? (Pour affichage sur iPhone par exemple).
Merci à toi !

pour retrecir la taille du texte, regarde du coté des mediaquerie pour modifier le font size.

Ce qui est deplaisant dans l'absolue, c'est que ce n'est plus dans le flux et du coup trop rigide et sujet a bug visuel si mal estimé , 2 défaut majeur a éviter: disparition de contenu par le haut ou la gauche et superposition de contenus.

Merci pour ta réponse!
Helas, je ne connais rien au mediaqueries, pourrais-tu m'aider ?
Merci encore,
Tico

il y a un tuto ici, tu peut commencer a y dégrossir tes connaissances. http://www.alsacreations.com/article/lire/930-css3-media-queries.html , et aussi http://css.mammouthland.net/css3/media-queries.php et http://developer.mozilla.org/fr/docs/CSS/Media_queries
++
Modifié par gc-nomade (15 Feb 2014 - 09:05)

Merci encore pour ta réponse. Ça fait je ne sais pas combien d'heures que je passe dessus mais je n'arrive a rien. Ce serait vraiment génial de ta part si tu pouvais éditer ton codepen en le complétant avec cette fonction. Comme ça je visualiserai et serait capable de la reproduire ailleurs.
Désolé de te demander ça, j’espère que ça ne te dérange pas trop.
Tico

eh bien , tentes de le faire et dis nous ou tu coinces ou quels sont les problemes que tu rencontres
++

C'est bon, trouvé !
Merci à toi et une prochaine peut être.
Tico