Vignettes avec images en html

Résolu/Fermé
Avanton66 Messages postés 44 Date d'inscription mercredi 10 mai 2017 Statut Membre Dernière intervention 14 mai 2020 - Modifié le 16 août 2018 à 17:46
Avanton66 Messages postés 44 Date d'inscription mercredi 10 mai 2017 Statut Membre Dernière intervention 14 mai 2020 - 25 août 2018 à 14:39
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

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 août 2018 à 11:32
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
Avanton66 Messages postés 44 Date d'inscription mercredi 10 mai 2017 Statut Membre Dernière intervention 14 mai 2020
Modifié le 16 août 2018 à 13:56
Merci beaucoup, mais il faudrait qu'il y est un lien comme ça quand on clique sur l'image:
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
16 août 2018 à 18:10
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 !
0
Avanton66 Messages postés 44 Date d'inscription mercredi 10 mai 2017 Statut Membre Dernière intervention 14 mai 2020 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
16 août 2018 à 19:46
Les images sont automatiquement adaptées à la taille de la vignette.
Le thème est expédition pro.
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
17 août 2018 à 11:07
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 :)
0
Avanton66 Messages postés 44 Date d'inscription mercredi 10 mai 2017 Statut Membre Dernière intervention 14 mai 2020
25 août 2018 à 14:39
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>
0