Image survole pour un lien image "Amazon "

Version imprimable

Bonjour,
J'ai essayé de chercher sur internet un solution pour afficher un lien sur image survole qui contient un texte, mais je n'ai pas pu réussi. En fait j'ai réussi d'afficher uniquement l'image survol en texte mais sans lien.
et voici le code que j'ai utilisé mais qui n' a pas marché.
Pour Css j'ai mis

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
}
img, figcaption {
    transition: all .25s ease;
}
img {
    display: block;
}
figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .5em;
    background: #000;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    opacity: 0;
}
figure:hover img {
    transform: scale(1.1);
}
figure:hover figcaption {
    opacity: 1;
}
}

Et pour html j'ai mis

Code:

1
2
3
4
5
6
7
8
<figure>
<a href="https://www.amazon.com/gp/product/B01HVF2SPG/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B01HVF2SPG&amp;linkCode=as2&amp;tag=amazon0440-20&amp;linkId=e0a4d4965709957c26e630f3c08d3e84" target="_blank" rel="nofollow">
 
<figure>
<img src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&amp;MarketPlace=US&amp;ASIN=B01HVF2SPG&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL160_&amp;tag=amazon0440-20" border="0" /></a><img style="border: none !important; margin: 0px !important;" src="//ir-na.amazon-adsystem.com/e/ir?t=amazon0440-20&amp;l=am2&amp;o=1&amp;a=B01HVF2SPG" alt="Nagarmotha - Cyperus Rotundus - 50 Grams" width="1" height="1" border="0" />
 
    <figcaption>Get the product</figcaption>
</figure>

Merci de m'aider pour résoudre ce problème.

11/08/2016, 11h03
beny56

Bonjour,
Je suis toujours bloquée, j'attends une intervention pour résoudre ce problème le plus vite possible, c'est très urgent. Merci de votre compréhension.
11/08/2016, 12h19
mathieu

bonjour

Vous êtes sur un forum de bénévoles ici. si vous avez besoin d'embaucher quelqu'un pour une réponse rapide, veuillez regarder du côté de la partie emploi :
http://emploi.developpez.com/

De plus votre demande n'est pas très claire. expliquez nous ce que vous obtenez actuellement avec le code que vous présentez et détaillez nous ce que vous souhaitez obtenir.
11/08/2016, 12h50
beny56

Ok, ma question c'est que j'ai une image qui pointe vers un lien externe, et je voudrais ajouter un texte audessus et quand on clique on se redirige vers le lien. Voila c'est tous ce que j'aurais besoin. Le code que j'ai écris fonctionne uniquement pour image survole mais le lien ne marche plus. Merci
11/08/2016, 17h52
mathieu

c'est peut être juste le placement des balises "a" qui pose problème parce qu'en les mettant comme sur la page suivante, le lien est cliquable
http://jsbin.com/wuvoniciyu/edit?html,css,output

ou même comme cela, c'est le rectangle entier qui est cliquable :
http://jsbin.com/kezupipuzu/edit?html,css,output
11/08/2016, 17h56
beny56

Wooow, c'est génial vous êtes magnifique, franchement je ne sais pas comment je pourrais vous remercier. Merci infiniment.
11/08/2016, 17h59
beny56

Citation:

Envoyé par mathieu

c'est peut être juste le placement des balises "a" qui pose problème parce qu'en les mettant comme sur la page suivante, le lien est cliquable
http://jsbin.com/wuvoniciyu/edit?html,css,output

ou même comme cela, c'est le rectangle entier qui est cliquable :
http://jsbin.com/kezupipuzu/edit?html,css,output

Vous êtes génial
11/08/2016, 21h47
beny56

Le problème a été bien résolu, mais quand je voulais appliquer le résultat sur d' autres produits qui sont dans les td, n'a pas marché parceque elles n'ont pas la même taille. J'ai cru ça y est tout est bon.
15/08/2016, 17h52
beny56

Bonjour, Je m'excuse beaucoup pour le dérangement, mais j'ai trouvé enfin le model exact que j'aie voulu appliquer sur les produits, sachant que chaque produit et dans un td et chacun a sa taille merci de voir l'exemple à droite sur ce lien suivant .http://helloglow.co/how-to-shrink-yo...comment-336559
Merci