Vignettes avec images en html [Résolu/Fermé]

Signaler
Messages postés
44
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
14 mai 2020
-
Messages postés
44
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
14 mai 2020
-
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/

2 réponses

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
429
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!
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60526 internautes nous ont dit merci ce mois-ci

Messages postés
44
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
14 mai 2020

Merci beaucoup, mais il faudrait qu'il y est un lien comme ça quand on clique sur l'image:
Messages postés
22994
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 septembre 2020
2 105
c'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 !
Messages postés
44
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
14 mai 2020
>
Messages postés
22994
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 septembre 2020

Les images sont automatiquement adaptées à la taille de la vignette.
Le thème est expédition pro.
Messages postés
22994
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 septembre 2020
2 105
1 - 'automatiquement ' = as-tu vérifié par ftp le poids de celles qui sont en ligne, puis ... adaptées ?
2 - modifier un thème est toujours possible mais peu recommandé, mieux vaut en trouver un autre, et ça ne manque pas :)
Messages postés
44
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
14 mai 2020

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>