Bonjour à tous
J'ai un nouveau problème dans le développement de mon site :
Sur ma page d'accueil j'ai des vignettes qui sont placées sur un scroll horizontal mais je n'aime pas beaucoup la présence de la barre de scroll, serait-il possible de la masquer et créer des flèches et un système d'ancres ? Un peut comme un slider ?
Code html : 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
44
45
46
47
48
49
50
51
52
53
54
55
56 <div id="logo"> <a href="index.html"> <img src="img/logo.png" alt="Romain L'Hermite, étudiant en design graphique" /> </a> </div> <div id="imgaccueil"> <div id="defileur"> <div class="imgaccueil"> <a href="dusangsurlecouduchat.html"> <img class ="imgaccueil2" src="img/dusangsurlecouduchataccueil.jpg" alt="Du sang sur le cou du chat" /> </a> </div> <div class="imgaccueil"> <a href="fastout.html"> <img class ="imgaccueil2" src="img/fastoutaccueil.jpg" alt="Fast Out" /> </a> </div> <div class="imgaccueil"> <a href="lgbt.html"> <img class ="imgaccueil2" src="img/jaquetteaccueil.jpg" alt="La jaquette, festival du cinéma gay, trans et lesbien" /> </a> </div> <div class="imgaccueil"> <a href="compare.html"> <img class ="imgaccueil2" src="img/compareaccueil.jpg" alt="compare" /> </a> </div> <div class="imgaccueil"> <a href="chut.html"> <img class ="imgaccueil2" src="img/chutaccueil.jpg" alt="chut" /> </a> </div> <div class="imgaccueil"> <a href="popeye.html"> <img class ="imgaccueil2" src="img/popeyeaccueil.jpg" alt="Popeye" /> </a> </div> <div class="imgaccueil"> <a href="laquinzaineduhiphop.html"> <img class ="imgaccueil2" src="img/hiphopaccueil.jpg" alt="La Quinzaine du Hip Hop" /> </a> </div> </div>En passant, je n'arrive pas à faire marcher mon grayscale ://
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 #defileur{ height:560px; width:1130px; } #imgaccueil{ z-index:5; float:left; position:absolute; height : 560px; width : 850px; /* +283.2 */ margin-left:280px; margin-top: 100px; overflow-y:hidden; overflow-x:scroll; } .imgaccueil{ float:left; display:inline-block; height :270px; width : 270px; margin : 5px; border: 1.6px solid #F9094A; } .imgaccueil2{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); transition-property:grayscale; transition-duration:0.2s; transition-timing-function:ease-in; -webkit-transition-property:grayscale; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:ease-in; -moz-transition-property:grayscale; -moz-transition-duration:0.2s; -moz-transition-timing-function:ease-in; } .imageaccueil2:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); }
Je vous remercie d'avance pour votre aide![]()
Partager