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 : 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
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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">&nbsp;</a>
   <a class="carousel-control right" href=".carousel" data-slide="next">&nbsp;</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