Vignettes avec images en html
Résolu
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/
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!-
-
Modérateurc'est construit sur la base d'un thème pour wordpress ...
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 ! -
@bg62Les images sont automatiquement adaptées à la taille de la vignette.
Le thème est expédition pro. -
-
-
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>
