Image responsive avec un lien
Résolu
lamontange
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Image responsive avec un lien
- Partager des photos avec un lien - Guide
- Lien url - Guide
- Verificateur de lien - Guide
- Image iso - Guide
- Lien copié - Forum Mobile