Discussion :

[beny56]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[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.

[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

[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

[beny56]

Wooow, c'est génial vous êtes magnifique, franchement je ne sais pas comment je pourrais vous remercier. Merci infiniment.

[beny56]

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

[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.

[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