28172 sujets

CSS et mise en forme, CSS3

Problème overlay pas à la taille de l'image

Salut, l'overlay ne s'adapte pas à certaines des images, je suis débutant alors c'est sûr que certaines choses m'échappent.
voici un exemple:


					<div class="overlay-image _b0">
						<img src ="BODY LISTENING KOMPONIST/menu.jpg" alt="Body listening komponist" class="image"/>
					<div class="hover _b2">
						<div class="text _2">Body Listening</div>
					</div>
				</div>
				</div>


.overlay-image
{
	position: relative;
	height:100%;
}

.overlay-image .image
{
	display:block;
	width:100%;
	height:auto;
}

.overlay-image .text
{
	color: black;
	font-size: 1.2em;
	font-weight: bold;
 	line-height: 1.5em;
 	text-shadow: 0.4em 0.4em 0.4em #000;
 	text-align: left;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 100%;
}

.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}

.overlay-image:hover .hover {
 opacity: 1;
}

.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0, 0, 0,0.5);
}

J'ai volé ce code à un gars et l'ai arrangé à ma sauce donc il y a peut être des trucs inutiles, aussi je n'arrive pas placer mes images aux bordures de l'écran mais c'est un problème secondaire

En tout cas merci beaucoup pour ceux qui m'aideront !
parsimonhi a écrit :
Bonjour,

Quel résultat attends-tu ?

Amicalement,


Bonjour parsimonhi !
J'aimerais que les images soient espacées et que celles aux bords n'aient pas d'espace avec celui ci, et que l'overlay s'adapte à ce changement de position
Bien cordialement !
Modérateur
Bonjour,

On ne peut juste pas répondre à ta question avec aussi peu d'informations.

Si je comprends bien, tu as une liste d'images à afficher avec un texte en dessous qui a l'air de ne s'afficher qu'au survol ?

Et tu veux qu'elles s'affichent sur une ligne ? Ou bien en colonne ? ou bien les deux ?

Et les images ont quelles tailles ? Ont-elles toute la même taille ? veux-tu qu'elle ait au final toute la même taille ? Et il y en a beaucoup ? Ou bien ça dépend des cas ?

Et enfin, tu souhaites faire quelques effets au passage de la souris sur les images ?

Amicalement,
Modérateur
Bonjour,

Voici au hasard une solution en supposant qu'il n'y a qu'une ligne d'images avec 4 images dedans. Si tu as un nombre d'images différent, il faut adapter la largeur de .overlay-image.

S'il a y trop d'images pour qu'elles tiennent sur une seule ligne, il faudra une solution différente.

J'ai modifié le html en remplaçant les div autour des images et du texte par une balise <figure> et une balise <figcaption>. C'est plus académique que des div.

J'ai regroupé les figures dans un conteneur de classe "liste-des-images". C'est lui qui fait le travail pour espacer les images, et coller la première et la dernière au bord de la page.

J'ai gardé tes effets tel quel (à l'exception de la couleur du texte que je te conseille de mettre en blanc et non en noir, sinon, on ne voit rien).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Liste d'images</title>
<style>
body
{
	margin:0;
	padding:0;
}

.liste-des-images
{
	display:flex;
	justify-content:space-between;
}

.overlay-image
{
	position:relative;
	display: block;
	width: 20%;
	margin: 0;
	padding: 0;
}

.overlay-image .image
{
	display:block;
	width:100%;
	height:auto;
}

.overlay-image .text
{
	color: white;
	font-size: 1.2em;
	font-weight: bold;
 	line-height: 1.5em;
 	text-shadow: 0.4em 0.4em 0.4em #000;
 	text-align: left;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 100%;
}

.overlay-image .hover
{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
}

.overlay-image:hover .hover
{
	opacity: 1;
}

.overlay-image .normal
{
	transition: .5s ease;
}

.overlay-image:hover .normal
{
	opacity: 0;
}

.overlay-image .hover
{
	background-color: rgba(0, 0, 0,0.5);
}
</style>
</head>
<body>
<div class="liste-des-images">
<figure class="overlay-image _b0">
<img src ="BODY LISTENING KOMPONIST/image1.jpg" alt="Body listening komponist 1" class="image"/>
<figcaption class="hover _b2">
<div class="text _2">Body Listening 1</div>
</figcaption>
</figure>
<figure class="overlay-image _b0">
<img src ="BODY LISTENING KOMPONIST/image2.jpg" alt="Body listening komponist 2" class="image"/>
<figcaption class="hover _b2">
<div class="text _2">Body Listening 2</div>
</figcaption>
 </figure>
<figure class="overlay-image _b0">
<img src ="BODY LISTENING KOMPONIST/image3.jpg" alt="Body listening komponist 3" class="image"/>
<figcaption class="hover _b2">
<div class="text _2">Body Listening 3</div>
</figcaption>
</figure>
<figure class="overlay-image _b0">
<img src ="BODY LISTENING KOMPONIST/image4.jpg" alt="Body listening komponist 4" class="image"/>
<figcaption class="hover _b2">
<div class="text _2">Body Listening 4</div>
</figcaption>
</figure>
</div>
</body>
</html>


Amicalement
Sujet clos
Aller à