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

Messages postés
40
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
18 septembre 2019
-
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/
Afficher la suite 

2 réponses

Meilleure réponse
Messages postés
1170
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
16 août 2018
422
1
Merci
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!

Dire « Merci » 1

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

CCM 59790 internautes nous ont dit merci ce mois-ci

Avanton66
Messages postés
40
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
18 septembre 2019
-
Merci beaucoup, mais il faudrait qu'il y est un lien comme ça quand on clique sur l'image:
bg62
Messages postés
23261
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
20 septembre 2019
1723 -
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 !
Avanton66
Messages postés
40
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
18 septembre 2019
> bg62
Messages postés
23261
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
20 septembre 2019
-
Les images sont automatiquement adaptées à la taille de la vignette.
Le thème est expédition pro.
bg62
Messages postés
23261
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
20 septembre 2019
1723 -
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
40
Date d'inscription
mercredi 10 mai 2017
Statut
Membre
Dernière intervention
18 septembre 2019
0
Merci
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>