Lien sur une <div>

[John]

Bonjour à tous,

Sur ma liste de produits j'ai aplliqué un overlay blanc transparent au passage de la souris.

Problème, l'image n'est plus clicable pour aller sur la fiche produit puisqu il y a un overlay dessus.

Je n'arrive pas à mettre le lien sur l'overlay.

Version prestashop 1.7.3

site:       www.hotel-boxcadeau .com

Si quelqu'un peu m'aider ca serais vraiment cool.

merci d'avance

[Eolia]

un lien sur un overlay ???

modifier l'opacity de l'image au survol ne suffirait pas ?

[John]

@Eolia,

je ne pense pas car il fallait que j'inclus le titre du produit sur l'overlay aussi. je voudrais maintenant juste ajouter le lien vers la fiche produit. j ai essayé plein de chose mais ca ne marche pas.

voila la dernière chose que j ai essayé

 <div class="filtre"><a href="{$product.url}"></a>
           <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:45:'...'}</a></h1>
<div class="ttproducthover">
            <div class="tt-button-container">
                {include file='catalog/_partials/customize/button-cart.tpl' product=$product}
            </div>
 

Mais ca ne fonctionne pas. il y a bien le lien sur le nom du produit mais pas sur le "filtre"

[Eolia]

bah normal le filtre n'est pas dans la balise <a>...

[John]

il y a 18 minutes, Eolia a dit :

bah normal le filtre n'est pas dans la balise <a>...

@Eolia,

je viens d'essayer ca:

<a href="{$product.url}"><div class="filtre"> </a>
           <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:45:'...'}</a></h1>
<div class="ttproducthover">
            <div class="tt-button-container">
                {include file='catalog/_partials/customize/button-cart.tpl' product=$product}
            </div>
ca fonctionne pas non plus. je suis un peu perdu la .

[Eolia]

euh... elle se ferme où ta div ???

[John]

il y a 22 minutes, Eolia a dit :

euh... elle se ferme où ta div ???

@Eolia,

voila la div entiere:

       <a href="{$product.url}"><div class="filtre"> </a>
           <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:45:'...'}</a></h1>
<div class="ttproducthover">
            <div class="tt-button-container">
                {include file='catalog/_partials/customize/button-cart.tpl' product=$product}
            </div>
            {hook h='displayTtWishListButton' product=$product}
            {hook h='displayTtCompareButton' product=$product}
            {block name='quick_view'}
                <div class="quick-view-block">
                    <a href="#" class="quick-view btn" data-link-action="quickview" title="{l s='Quick view'}">
                        <i class="material-icons search">&#xE8B6;</i> <span>{l s='Quick view' d='Shop.Theme.Actions'}</span>
                    </a>
                </div>
            {/block}
            </div>

       </div>
{/block}

[Eolia]

Ok donc c'est n'importe quoi^^

1 - on ne doit imbriquer n'importe comment les balises

2- cette div ne doit pas englober le reste

donc:

tu places ce code à la fin du code existant, dans la div que tu veux recouvrir:

<a class="link-filtre" href="ton_url"><div  class="filtre">le contenu de ta div </div></a>

et en css tu mets:

.filtre {

   display:none;

   position: absolute;

   top: 0;

   z-index: 9000;

   width: 100%;}

a.link_filtre:hover .filtre {display: block}

et passe ta div contenante en relative si elle ne l'est pas déjà.

PS: a toi d'ajuster les css, je t'ai fait ça rapide, de tête

[John]

@Eolia ,

je pense que j ai rien compris car ca ne marche pas.

je me rend compte que j'ai pas vraiment le niveau la.

Merci pour ton temps.