Effet de transition

Version imprimable

03/03/2014, 16h16
Crowww

Effet de transition

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!
03/03/2014, 17h49
dev14

Oui c'est possible, avec la propriét "transition" en css, et sur le hover une taille différente du cercle.
04/03/2014, 09h37
Crowww

Bug clignement

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) :(
04/03/2014, 12h26
rodolphebrd

Bonjour,

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

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

Code:

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:

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>