bordure extérieur au survol de la vignette

[azer]

Bonjour, je souhaite mettre une bordure au survole des vignettes en front office, j'ai mis ce code CSS dans custom.css :

.thumbnail-container:hover, .thumbnail-container:focus    
    {border:2px solid black;}
#products .product-description, #products .highlighted-informations, .featured-products .product-description, .featured-products .highlighted-informations
    {width: 99.8%;}

 

 

Mais c'est pas parfait car la bordure apparaît a l’intérieur du container ce qui fait que la bordure est mangé un peu (en plus ça fait se réduire l'image de quelque millimètre quand la bordure apparaît).

Donc ma question: Comment fait on pour que la bordure apparaissent a l'extérieur du container et non a l'intérieur svp ?

[vtalla]

13 hours ago, azer said:

Bonjour, je souhaite mettre une bordure au survole des vignettes en front office, j'ai mis ce code CSS dans custom.css :

.thumbnail-container:hover, .thumbnail-container:focus    
    {border:2px solid black;}
#products .product-description, #products .highlighted-informations, .featured-products .product-description, .featured-products .highlighted-informations
    {width: 99.8%;}

 

 

Mais c'est pas parfait car la bordure apparaît a l’intérieur du container ce qui fait que la bordure est mangé un peu (en plus ça fait se réduire l'image de quelque millimètre quand la bordure apparaît).

Donc ma question: Comment fait on pour que la bordure apparaissent a l'extérieur du container et non a l'intérieur svp ?

 

 

Bonjour,

Essayer ceci voir :

.thumbnail-container:focus:before,

.thumbnail-container:hover:before {
    border: 2px solid #000;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 2;
    content: "";
}

 

Cordialement

[azer]

Visuellement c'est le bon résultat, mais par contre les vignettes ne sont plus interactives on ne peut plus cliquer dessus.

J'ai fait plein de test a taton et apparemment c'est l'expression "before" qui fait qu'il y a un voile par dessus la vignette empêchant de cliquer dessus. Mais si on supprime "before" alors le code ne fonctionne plus.

svp,.. Comment faire?

Edited November 6, 2018 by azer (see edit history)

[azer]

Vous auriez pas une réponse svp ?

 

J'ai tenté de trouver un truc qui vide l'élément créé au milieu pour qu'on puisse cliqué sur la vignette dessous, mais j'ai pas trouver.

 

Il faudrait que l'élément en bleu soit vide et qu'il ne reste plus que le border et le margin, comment faire svp ?