Ajout d'un mask devant bootstrap
Bonjour, j'utilise boostrap carousel pour afficher une gallerie d'images générées par mes utilisateurs.
Cepandant, les images s'intègrent souvent très mal avec le design de mon site.
C'est pourquoi, je voudrai rajouter un mask avec transparence devant images (voilà le mask en question : http://img52.imageshack.us/img52/2659/degrade.png )
Cepandant, je n'arrive pas à l'afficher en premier plan...
De plus, il faut qu'il soit non clickable étant donnée que lorsque l'utilisateur click sur une image du carousel, une fenetre modale s'ouvre avec l'image en plus grand.
mon code css (avec imbrication less, mais vous voyez le principe) :
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
| carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
} |
Mon code html :
Code:
1
2
3
4
5
6
7
8
9
| <div class="carousel slide">
<div class="carousel-inner">
<div class="item active"><a href="popup_img1.htm"><img src="thumbnail1.jpg" /></a></div>
<div class="item"><a href="popup_img2.htm"><img src="thumbnail2.jpg" /></a></div>
<div class="item"><a href="popup_img3.htm"><img src="thumbnail3.jpg" /></a></div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div> |
Je cherche donc à placer mon image devant tout ce petit beau monde, soit dans une div, soit dans un autre élément...
merci d'avance :)
