Discussion :

[Crowww]

Bonjour,

Je suis actuellement en train de créer un site en Parallax, uniquement à l'aide d'HTML et de CSS pour le moment, et j'aimerais que cela puisse continuer dans la mesure du possible.
Cependant, je cherche à faire un effet de transition entre deux images. Je m'explique :
J'ai aperçu sur le site d'un ami des cercles (qui sont des liens vers ses pages projets) et lorsqu'on les survolent, le cercle s'agrandi. Il à fait cet effet avec du Javascript, cependant je me demandais s'il n'était pas possible de faire un effet semblable en CSS, ou, si la réponse est non, de faire un effet assez fluide en CSS pour rester sur un coter design assez propre aux sites parallax?

Je vous remercie d'avance!

[dev14]

Oui c'est possible, avec la propriét "transition" en css, et sur le hover une taille différente du cercle.

[Crowww]

Merci pour ta réponse, j'ai trouver une transition qui me plait bien.

Seulement, vers la fin de la transition (quand l'image atteint sa taille maximale) il y a un vilain clignement qui gâche toute la transition, et je ne trouve pas le moyen d'y remédier (mon code est le même que sur le site)

[rodolphebrd]

Bonjour,

Ca serait sympa de voir un peu de code...

[Crowww]

J'ai trouver mon problème, pour ceux que cela intéresse, voici mon code utilisé :
Pour le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#flou{
width:302px;
height:320px;
margin:70px auto;
}
#flou li{
list-style:none;
float:left;
width:141px;
height:150px;
margin:5px;
}
#flou li:nth-child(3){
clear:left;
}
#flou img{
position:absolute;
z-index:1;
height:150px;width:auto;
margin:0;
box-shadow:0 0 3px black;
-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);
    -moz-transition:all .5s cubic-bezier(.6,2,.4,1);
     -ms-transition:all .5s cubic-bezier(.6,2,.4,1);
      -o-transition:all .5s cubic-bezier(.6,2,.4,1);
         transition:all .5s cubic-bezier(.6,2,.4,1);
}
/* #flou li:hover img{
z-index:5;
-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
     -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
         transform: scale(1.5);
box-shadow:0 0 10px black;
} */
#flou:hover li:not(:hover) img{
-webkit-filter: grayscale(1) blur(5px);
    -moz-filter: grayscale(1) blur(5px);
     -ms-filter: grayscale(1) blur(5px);
      -o-filter: grayscale(1) blur(5px);
         filter: grayscale(1) blur(5px);
}

Pour l'HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="flou">
	<a href="cg79.html"><li><img src="images/cg79.jpg" alt="cg79" /></li></a>
	<a href="Maif.html"><li><img src="images/MAIF.jpg" alt="MAIF" /></li></a>
	<a href="Veille.html"><li><img src="images/W8.jpg" alt="W8" /></li></a>
	<li><img src="images/comingsoon.jpeg" alt="CS" /></li>
</ul>