Discussion :

[b4bass]

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

[macelfresh]

En background image sur le a ça ne fonctionne pas?

Avec propriété CSS pour le a un display:block, width: largeur du mask, height:hauteur du mask

[b4bass]

ca m'a donné une idée, j'ai pris le problème à l'envers et remplacé l'image src par un bg-image... du coup ça donne ça :

http://jsfiddle.net/NKpPW/27/

Mais j'ai toujours un problème, c'est que le masque se déplace en même temps que l'image...

Je voudrais que le masque reste fixe et que les images se déplace en dessous

[macelfresh]

Oui mais par contre si tu fais ça, ça devient sémantiquement faux. Puisque l'image de ton contenu n'est plus dans le contenu, et qu'une image ornementale s'y répète et ne veut rien dire.

Essaie, si tu veux que ca reste fixe, de mettre ton masque en bg-image de la div .carrousel.

Et d'ailleurs, peut-être que ça fonctionne, mais je pense que js repasse par là, .carrousel-inner ne devrait pas avoir une largeur fixe (ca peut te poser problème). par contre div.item, oui.