Image responsive avec un lien
Résolu
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
Mes css :
IMAGE
TEXTE
Je suis dessus depuis hier, quelqu'un pour m'aider SVP ?
Merci beaucoup
LM
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