28172 sujets

CSS et mise en forme, CSS3

Superposition texte sur image

Bonsoir tout le monde,

J'aurai besoin qu'une âme charitable vienne éclairer mes lanternes ! Smiley smile
Je m'exerce à coder et pour cela je suis en train de créer un blog avec bootstrap.
Mais je rencontre un problème ! Smiley sweatdrop

J'ai 4 images qui prennent 100% de la largeur puis 50% en dessous de 768px. J'aimerai inclure du texte sur les images un peu comme ça dans l'idée upload/59796-Capturedan.png tout en gardant la responsivité et que le texte prenne en compte la taille de l'image (si le texte plus long que l'image, il va à la ligne).
J'espère être clair car je n'en suis pas sûr. Smiley confus

J'ai essayé différentes choses sans succès, c'est pour cela que je me tourne vers vous !

Voici le petit bout de html et css :



	<div class="block_av">
		<ul>
			<li class="art_av">
				<img src="img/image1.jpg" alt="" class="img-responsive">
				<h2>bonjour</h2>
				<h4></h4>
				<a href=""></a>
			</li>
			<li class="art_av">
				<img src="img/image1.jpg" alt="" class="img-responsive">
				<h2>bonjour</h2>
				<h4></h4>
				<a href=""></a>
			</li>
			<li class="art_av">
				<img src="img/image1.jpg" alt="" class="img-responsive">
				<h2>bonjour</h2>
				<h4></h4>
				<a href=""></a>
			</li>
			<li class="art_av">
				<img src="img/image1.jpg" alt="" class="img-responsive">
				<h2>bonjour</h2>
				<h4></h4>
				<a href=""></a>
			</li>
		</ul>
	</div>




.block_av li.art_av {
	position: relative;
	display: block;
	width: 25%;
	height: auto;
	float: left;
}

@media (max-width: 767px) {
.block_av li.art_av {
	position: relative;
	display: block;
	width: 50%;
	height: auto;
	float: left;
	margin-top: -10px;
}
}

.block_av li.art_av>img {
	width: 100%;
	height: auto;

	filter: brightness(50%);
        -webkit-filter: brightness(50%);
        -moz-filter: brightness(50%);
        -o-filter: brightness(50%);
        -ms-filter: brightness(50%);
}

.block_av li.art_av>img:hover {
	filter: brightness(75%);
        -webkit-filter: brightness(75%);
        -moz-filter: brightness(75%);
        -o-filter: brightness(75%);
        -ms-filter: brightness(75%);
}


Je vous remercie d'avance pour vos réponses !

Cordialement,
Tristan.
Modifié par tristan_Og (03 Sep 2015 - 00:02)
Bonjour Tristan,

Pour pouvoir mettre en place ce que vous désirez, il faut mettre les propriétés suivantes à votre balise h2, comme ceci :


h2 {
position:relative;
z-index:1000;
}


z-index correspond à la superposition de l’élément. Il faut penser en 3D pour comprendre comment cela fonctionne. La valeur correspond au niveau de priorité dans la superposition. Par exemple si vous avez un autre élément à qui vous lui donnez un z-index de 500, il passera entre votre image et votre balise h2.

Bien entendu, il va falloir aussi décider du positionnement horizontal mais surtout vertical de votre balise H2.

Parce que je pense que dans votre code, si je ne m'abuse, vos balises h2 se retrouvent à l'origine sous chaque image.

Donc grâce à la propriété position:relative, vous allez pouvoir bouger votre élément de sa position d'origine. Z-index s'associe à cette propriété bien sur, mais vous avez aussi top, bottom, left et right.

La valeur s'exprime en pixels ou pourcentage.

Pour chacune de ces propriétés, la règle est la suivante :

Vous bougez l’élément de la valeur donnée depuis la position d'origine donnée par la propriété.

Ce qui veux dire que si vous mettez cette propriété par exemple :

left:50px


Vous bougez votre élément de 50px DEPUIS le cote gauche - Et non pas de 50px vers la gauche; erreur que beaucoup d'apprentis codeurs font.

Donc avec toutes ces indications, je vous laisse tester quelle propriété doit être insérée pour votre h2 et quelle valeur (pour ce dernier cas, tout dépend du positionnement que vous voulez avoir).

Bien entendu, il va falloir adapter le positionnement par rapport aux résolutions d’écran; je vous suggère de fait d'utiliser à priori les pourcentages plutôt que les pixels.

J’espère avoir été assez clair, n’hésitez pas à revenir au besoin Smiley cligne
Bonjour,

Merci onirisweb pour la réponse ! Smiley smile

J'ai finalement opté pour le carousel owl carousel qui convenait mieux pour ce que je voulais faire.

Mais j'ai tout de même essayé ce que vous m'avez dit et ça fonctionne nickel. Je le saurai pour la prochaine fois. Smiley cligne
Modifié par tristan_Og (04 Sep 2015 - 20:48)
Sujet clos
Aller à