Jump to content
azer

bordure extérieur au survol de la vignette

Recommended Posts

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%;}

 

cadre au survol.jpg

 

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 ?

Share this post


Link to post
Share on other sites
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%;}

 

cadre au survol.jpg

 

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

Share this post


Link to post
Share on other sites

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 by azer (see edit history)

Share this post


Link to post
Share on other sites

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.

5be9db7746617_Sanstitre.jpg.5c2eaadb7351cfa0aea293195715d9e5.jpg

 

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 ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More