28112 sujets

CSS et mise en forme, CSS3

[Résolu] Superposition de texte sur image au passage de la souris

Bonjour,

Après avoir essayé de trouver par moi-même une solution, je fais appel à vous.

Voici ce que j'essaye de faire : sur la page d'accueil de mon site, il y a une image qui est aussi un lien vers une autre page avec un texte de présentation du site. J'aimerais que le texte "Présentation" s'affiche sur l'image, au centre, lors du survol de la souris. Je souhaite utiliser pour cela la propriété "hover".

Voici ce que j'ai écrit pour l'instant :

<div class="imageaccueil1presentation"><a href="presentation.html"><img src="images/accueil/1.jpg" alt="" height="200"><div class="texteimageaccueil1presentation">Présentation</div></a></div>


.imageaccueil1presentation {
float: left;
padding-top: 44px;
padding-left: 12px;
padding-right: 44px;
height: 200px;
position: relative;
}

.texteimageaccueil1presentation {	
font-family: "Linux libertine Display O";
font-size: 18px;
color: black;
text-decoration: none;
text-align: center;
position: absolute;
visibility: hidden;
}

.imageaccueil1presentation:hover .texteimageaccueil1presentation {
visibility: visible;	
}


Le texte s'affiche avec la mise en forme choisie et seulement au passage de la souris sur l'image, cependant il apparaît en dessous de l'image, or je voudrais qu'il soit superposé sur l'image, centré horizontalement et verticalement.

Sauriez-vous comment je pourrais faire ça ?

J'espère que vous pourrez m'aider !!
Laure
Modérateur
Salut !

Tu y est presque ! Tu as bein positionné ton texte en absolute mais tu as oublié de lui donner une position (top left right bottom) et une taille (height width). Ici tu a juste besoin de rajouter

width: 100%;
top: 50%;
left: 0;


Comme tu as un text-align:center le width 100% permettra de centrer ton texte horizontalement. Attention tout de meme car le padding du parent est pas égal a droite et a gauche donc le texte ne sera pas centré. Tu peu remplacer le padding par un margin ou bien mettre un padding égal des deux cotés.

left:0 changera rien mais c'est pour etre sur.

Top 50% ne va pas exactement le placer au centre vu que le haut du texte commencera a la moitié. tu tu veux le centrer parfaitement en hauteur tu peux rajouter
transform: translateY(-50%);

Attention là aussi même remarque avec le padding du parent. A remplacer par un margin ca sera plus simple.

Bonne journée
Meilleure solution
Modérateur
Bonjour,

Un truc du genre ?
<picture>
  <a href="#">
    <img width="200" height="200">
    <figcaption>Here we go!</figcaption>
  </a>
</picture>
picture {
  --border-width: 5px;
  position: relative;
  display: inline-flex;
}
img {
  border-style: solid;
  border-width: var(--border-width);
  border-radius: 50%;
}
figcaption {
  position: absolute;
  top: 50%;
  left: var(--border-width);
  right: var(--border-width);
  text-align: center;
  transform: translateY(-50%);
  background: azure;
  opacity: 0;
  transition: opacity .66s 0s ease-in-out;
}
picture:hover figcaption {
  opacity: 1;
}
}
Smiley langue
Modifié par Greg_Lumiere (31 Jul 2020 - 09:57)
Bonjour,

Merci beaucoup à vous tous !

J'ai essayé la première solution, celle de Laurent, et ça a très bien marché. J'ai en effet remplacé les padding pour des margin pour bien centrer le texte horizontalement, et j'ai légèrement modifié le pourcentage (top: 50%;) afin de le centrer verticalement.

Cela faisait des semaines que j'essayais de résoudre ce problème, car en général j'essaye de trouver seule les réponses pour mieux apprendre et comprendre ce que je fais, alors c'est un soulagement ! Je vais passer un bon week-end !

Bonne journée et encore merci,
Laure
Modérateur
laurerocherluna a écrit :
Je vais passer un bon week-end !

Et bah ca fait plaisir alors !
Bon weekend ! Smiley lol
Sujet clos
Aller à