28172 sujets

CSS et mise en forme, CSS3

Filtre sur un slideshow css opacité

Bonjour,

Je rencontre un problème sur un slideshow en css (animation sur l'opacité), j'ai appliqué un filtre grayscale(1) par défaut sur les div qui ont les images en background, puis grayscale(0) au survol.
Le grayscale(1) s'applique bien sur les 3 div mais bizarrement (pas tant que ça vu qu'on joue sur l'opacité) le grayscale(0) au survol ne s'applique que sur la div du milieu.
Il y a aussi un effet parallaxe mais je ne pense que ça joue.

Le css :

/* ANIMATION */
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

/* LES DIV BG IMAGES */
.slide1, .slide2, .slide3 {
  background-attachment: fixed;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out 0.2s;
  opacity: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%
}
.slide1 {
  background: url("images/img3.jpg")no-repeat center;
  background-size: cover;
  -webkit-animation: fade 18s infinite;
  animation: fade 18s infinite;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
} 
.slide2 {
  background: url("images/img1.jpg")no-repeat center;
  background-size: cover;
  -webkit-animation: fade2 18s infinite;
  animation: fade2 18s infinite;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
}
.slide3 {
  background: url("images/img2.jpg")no-repeat center;
  background-size: cover;
  -webkit-animation: fade3 18s infinite;
  animation: fade3 18s infinite;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
}

/* EFFET FILTRE GRAYSCALE */
.slide3:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
}
.slide2:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
}
.slide1:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
}


Voilà, j'espère avoir été suffisamment clair et si quelqu'un voit une solution je lui serais très reconnaissant.
Je tiens à l'effet "fade".

Merci

Je peut vous poster le lien sur le site en développent si nécessaire.
En effet j'ai oublié...

<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>

Voilà c'est tout!
En ce qui me concerne, ce n'est pas celui du milieu mais le dernier qui peut changer au survol...

C'est assez logique car c'est le dernier dans l'ordre du HTML...
Il est superposé sur les deux autres.

Quant à la solution... peut-être que le slideshow est un peu trop compliqué...

Smiley smile
connecté
Bonjour,

Dans un premier temps - ce slide full css fonctionnant sur le principe de l'opacité et le dernier élément étant toujours au dessus des autres - je pensais qu'il était normal que seul la dernière div réagisse étant donné que c'est elle seule que l'on survole en hover (il s'agit bien de la dernière div et non de la deuxième, j'ai vérifié). Ça c'est le premier problème. Pour le palier il suffit donc de mettre un conteneur parent pour lequel, s'il est survolé, tous les éléments enfants prennent une valeur grayscale(0).

Mais je me suis aperçu que ce n'était pas suffisant : en effet il semble que l'animation prenne le pas sur l'effet hover. Et là, je n'ai pas de solution à proposer...

PS : Attention, votre code est très répétitif, vous pouvez le factoriser sans problème. L'une des raisons pour laquelle vous n'arrivez pas à le factoriser étant que vous utilisez backgroud plutôt que background-image, ce qui vous formate toutes les propriétés définies plus haut dans votre code et vous force à les déclarer pour chaque élément. Et encore : background-position prend obligatoirement deux valeurs et non une seule, sinon cela ne fonctionnera pas sur tous les navigateurs (Firefox de mémoire, Chrome, lui, est permissif sur ce point). Mais bon, je pense que la compatibilité ne rentre pas ici en ligne de compte car grayscale déjà... sur IE11... Le code en ligne une fois factorisé : CodePen
Modifié par Olivier C (09 Dec 2016 - 03:54)
Bonjour et merci Olivier pour ces explications et le codepen, je regarderai ça dans la journée et reviendrai ici.

Bonne journée
Bonsoir,

Le sujet n'est plus trop d'actualité, le client ayant opté pour une vidéo en background mais le problème m'intéresse toujours.
J'ai essayé une solution peu orthodoxe en supprimant le grayscale et en optant pour un conteneur parent pour chaque slide avec 2 div, une couleur et une niveau de gris, c'est bien mais c'est lourd , déplacer la div en js c'est possible ?

Merci
Sujet clos
Aller à