18008 sujets

Questions générales et questions de débutants

[Résolu] Insérer du texte sur une image

Bonjour à tous,

je cherche à coder quelque chose qui ressemble à l'image ci-dessous:

https://forum.alsacreations.com/upload/1533759636-71986-image1.jpg

Le carré en fond de couleur rouge est une image, sur laquelle je souhaite insérer deux textes placés environ à ces endroits là de l'image (à peaufiner). Le texte1 est, lui, écris dans un carré de couleur. Ensuite, au survol de l'image avec la souris je veux faire disparaître les deux texte et n'avoir que l'image. Je retourne le problème dans tous les sens en utilisant display: flex et des positions relatives et absolues mais j'ai toujours un problème de placement du texte et je ne trouve pas spécialement d'aide sur le web. je suis en phase d'apprentissage, je débute et dois encore me faire la main sur ces aspects qui ont pourtant l'air basique.

Je suis preneur de la solution évidemment mais aussi de quelconque conseil sur ce sujet!

Merci de votre aide ! Smiley smile Smiley smile Smiley smile
Mon côté narcissique me permet de te proposer ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Je suis le roi des chats</title>
	<style>
		body { background: #666; }
		#container {
			background: url('https://cdnf.alsacreations.net/avatars/1524176909-69159-chaton-rieur-150.jpg') no-repeat center center;
			width: 150px; height: 150px;
			margin: 50vh auto 0;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		#container p { background: #fff; width: 80%; padding: 0.3rem 0; margin: 0 auto; text-align: center; }
		#container:not(.progressive):hover p { display: none; }
		#container.progressive p { transition: opacity 0.5s ease; }
		#container.progressive:hover p { opacity: 0; }
	</style>
</head><body>
	<div id="container" class="progressive">
		<p>Miaou..</p>
		<p>MIAOU !!!</p>
	</div>
</body></html>
bazooka07 a écrit :
Mon côté narcissique me permet de te proposer ceci :
&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
	&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
	&lt;meta charset="utf-8" /&gt;
	&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
	&lt;title&gt;Je suis le roi des chats&lt;/title&gt;
	&lt;style&gt;
		body { background: #666; }
		#container {
			background: url('https://cdnf.alsacreations.net/avatars/1524176909-69159-chaton-rieur-150.jpg') no-repeat center center;
			width: 150px; height: 150px;
			margin: 50vh auto 0;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		#container p { background: #fff; width: 80%; padding: 0.3rem 0; margin: 0 auto; text-align: center; }
		#container:not(.progressive):hover p { display: none; }
		#container.progressive p { transition: opacity 0.5s ease; }
		#container.progressive:hover p { opacity: 0; }
	&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;
	&lt;div id="container" class="progressive"&gt;
		&lt;p&gt;Miaou..&lt;/p&gt;
		&lt;p&gt;MIAOU !!!&lt;/p&gt;
	&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;

x)
Sujet clos
Aller à