Vignettes avec images en html
Résolu
Avanton66
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
-
Avanton66 Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
Avanton66 Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je voudrais savoir comment faire une vignette avec un lien et une image comme ci dessous:
Le site : h t t p s : / /lvoyagent.fr
quand je fais inspecter la vignette et j'utilise le code, ça ne donne pas ce que je veux.
lien : https://lvoyagent.fr/europe-2/
Je voudrais savoir comment faire une vignette avec un lien et une image comme ci dessous:
Le site : h t t p s : / /lvoyagent.fr
quand je fais inspecter la vignette et j'utilise le code, ça ne donne pas ce que je veux.
lien : https://lvoyagent.fr/europe-2/
A voir également:
- Vignette html
- Editeur html - Télécharger - HTML
- Vignette contrôle technique vierge pdf ✓ - Forum Imprimante
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
2 réponses
Hello,
Je t'ai fais un petit exemple live sur codepen: https://codepen.io/anon/pen/zLVorQ
Je te laisse regarder et revenir si tu as des questions.
A plus!
Je t'ai fais un petit exemple live sur codepen: https://codepen.io/anon/pen/zLVorQ
Je te laisse regarder et revenir si tu as des questions.
A plus!
J'ai finalement trouver en quelque sorte comment faire grâce au pen:
<style type="text/css">.img-container {
display: inline-block;
position: relative;
}
.img-container .title {
left: 0;
top:0;
display: flex;
position: absolute;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,.5);
font-size: 24pt;
font-weight: bolder;
color: white;
}
</style>
<div class="img-container">
<img src="https://picsum.photos/200/300">
<div class="title"><a href="https://lvoyagent.fr/destinations/estonie/">Estonie</a></div>
</div>
mais il ne faut pas oublier que les images mises en ligne doivent quand même respecter une certaine taille ( maximum ) pour ne pas gêner leur affichage !
Le thème est expédition pro.
2 - modifier un thème est toujours possible mais peu recommandé, mieux vaut en trouver un autre, et ça ne manque pas :)