Jump to content

ajout code dans css pour effet overlay sur diaporama ?


Recommended Posts

Bonsoir, 

j'avais déjà posé la question cet été, mais elle est restée sans réponse.

J'ai cherché sur le forum mais je n'en trouve pas correspondant. (peut-être est-elle mal posée)

Je voudrais ajouter un effet overlay sur le slideshow de la page home de la boutique, l'effet serait donc sur les photos, comme un calque.

J'ai trouver le code suivant :

1-  je ne sais pas où l'insérer : J'ai essayé dans le css module homeslider mais sans résultat.

2- ce code pose l'effet en background moi je le voudrais en overlay. Comment dois-je le rédiger ?

Quelqu'un aurait-il la/les réponse (s)? 

 

Je vous remercie d'avance de votre précieuse aide...

Et oui, pour moi, pauvre débutante, c'est fastidieux  :(

 

body {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%),
-moz-linear-gradient(-45deg, #666 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, #666 75%),
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, #666 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%),
-o-linear-gradient(-45deg, #666 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, #666 75%),
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

post-1276980-0-32797900-1475705067_thumb.png

Share this post


Link to post
Share on other sites

Bonjour,

 

Là, c'est sur la balise générale body.

Si ce code donne bien l'effet overlay, alors il faut le poser dans le div de présentation de la photo du slideshow. 

Il faut aller dans le code du template, poser une class sur le div, et mettre le code de la class ajoutée dans le css du slideshow.

En gros, c'est ça.

Share this post


Link to post
Share on other sites

Bonjour et merci pour votre réponse.

En revanche ça ne fonctionne.

J'ai de nouveau essayé de placé le code dans le body du slider dans le : 

- global CSS

- Homeslider

- CSS slider (layerslider css)

 

et dois changer dans le code "background" par "overlay" pour avoir l'effet par dessus les photos.

j'ai vu que Vekia avait laissé un message que je ne peux pas consulter. La réponse y est peut--être donnée.

Bonne journée. Et merci pour les précisions que vous pourrez apporter. 

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
 Share

×
×
  • Create New...

Important Information

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