Image responsive avec un lien

Résolu/Fermé
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 2 avril 2022 à 13:30
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 3 avril 2022 à 17:02
Bonjour,
J'ai une image de 50% de large qui se à droite d'un texte. Je désire faire un lien à cette image. Rien de plus simple mais cela fait passer le texte dessous. L'image n'habille plus le texte.
J'ai tenté de mettre l'image dans une div, mais gros problème pour dimensionner l'image (hauteur/%/vw etc...).
Mon html
<img src="./imgs/dmitri.jpg" alt="mannequin" class="dmitri" border="0">
			<section class="link-border">
<p>texte<.p></section>.

Mes css :
IMAGE
.dmitri {
position: relative;
width: 50%;
height: auto;
float: right;
margin-left: 20px;
}

TEXTE
.link-border a {
color: #e74c3c;
font-weight: 500;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}

.link-border a:hover,
.link-border a:focus {
-webkit-transform: scale(0.8333);
transform: scale(0.8333);
}

.link-border a::before {
position: absolute;
top: -2px;
left: -7px;
box-sizing: content-box;
padding: 0 5px;
width: 100%;
height: 100%;
border: 2px solid #e74c3c;
content: '';
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: scale(0.8333);
transform: scale(0.8333);
}

.link-border a:hover::before,
.link-border a:focus::before {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

Je suis dessus depuis hier, quelqu'un pour m'aider SVP ?
Merci beaucoup
LM

1 réponse

lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
3 avril 2022 à 17:02
Bonjour,
C'était un
display: inline-block

qui trainait dans une -autre css.
Voilà !
1