[Résolu] Label flottant sur DIV redimensionnable

Salut à tous.

Je suis actuellement en train de me battre avec une balise label (comme indiqué dans le titre vous me direz...). Je vais essayer d'être le plus clair possible

La maquette :



Le code :

 <div class="lb-overlay" id="image-4"> 
			<input type="button" value="x Close" name="close" onClick="window.location = '#page'"></button>
			<div class="lb-container">
            <input type="radio" name="slide_switch" id="id5"/>
	<label for="id5">
		<img src="images/full/4.jpg" width="150"/>
	</label>
	    <div class="lb-img"><img src="images/full/4.jpg" width="100"/></div>
	
           <input type="radio" name="slide_switch" id="id6"/>
	<label for="id6">
		<img src="images/full/4.jpg" width="150"/>
	</label>
          <div class="lb-img"><img src="images/full/4.jpg" width="100"/></div>
	</div>

Voici une DIV (lb-overlay) de mon portpoflio, contenant une image (lb-img) et un label à l'intérieure d'une DIV (lb-container).

La DIV lb-img se redimensionne automatiquement au format de l'image qu'elle contient. Les images pouvant être au format portrait comme paysage, je souhaite faire en sorte que le label se déplace en même temps que le bord gauche de ladite DIV. Sachant que le bord droit de cette dernière ne doit jamais bouger de place.

J'espère avoir été assez clair. Si quelqu'un a une idée, ça pourrait m'économiser une nuit blanche ou plus !
Et merci d'avance pour vos futures réponses
Modifié par Somah (01 Aug 2016 - 14:49)

Bonjour,

Le problème c'est que le code montré ne contient ni .lb-container ni .lb-img. En revanche à quoi correspondent ces boutons et input radios ? Le mieux serait d'avoir un exemple en ligne, même approximatif, mais avec tous les éléments concernés.

Salut Olivier et merci d'avoir souligné ça. Les changements viennent d'être fait. Pour le bouton, il sert à fermer la lightbox. En effet, la DIV lb-overlay est une lightbox. Les inputs radio ce sont les différentes images qu'il y a à afficher. J'ai cherché sur le net un slider avec vignette sans JS et c'est ce que j'ai trouvé. Pour l'exemple en ligne, j'upload tout ça en ce moment même alors ça devrait y être d'ici 5min : http://www.somah-corp.fr/.

Le problème, c'est dans la partie "Work". Pour accéder à la lightbox, il faut cliquer sur l'icône loupe sur les vignettes (qui s'affiche en :hover). Pour certaines de mes créa, j'ai plusieurs versions à afficher. Donc ce qu'il me faut, c'est une partie vignette pour sélectionner une version (le label dans mon code). Et une partie qui affiche la version sélectionnée (l'input radio dans ce même code). La DIV lb-img qui affiche l'image sélectionnée se redimensionnant au format de l'image, j'ai besoin que le label reste constamment à une certaine marge de lb-img. Pour l'aperçu en ligne, les images portrait et paysage sont respectivement la 1ère et la 4ème (L'hallucidité et Lilith).

C'est bon j'ai trouvé. Je sais vraiment pas pourquoi je me suis pris la tête alors que j'avais juste à déclarer 2 largeurs différentes de lb-container. Une pour les portraits, une pour les paysages. En tout cas merci d'avoir essayé et de m'avoir orienté vers Flexbox.