Discussion :

[bloups0]

Bonjour à vous,

Je viens ici car je ne trouve pas de solution à mon souci. Je dois afficher trois bloques d'article qui se charge dynamiquement sur une page, et je dois appliquer un background-image dessus, ainsi qu'une opacité sur l'image. Dans le bloque, je dois aussi afficher le contenu de l'article et je voudrai que l'opacité ne s'applique pas au contenu du bloque, je ne sais absolument pas comment faire, voilà l'exemple :

http://codepen.io/anon/pen/ZBxNve

PS: je n'ai pas le choix de mettre directement le style dans le code html, ne pouvant pas passer par du JS, c'est le seul choix qui me reste, car les images changent si de nouveaux article sortent.

Merci d'avance !

[vttman]

j'obtiens ceci si ça peut aider ...
Comme le problème est que le texte à laisser opaque fait partie de la boîte en transparence, je sors le texte.
http://codepen.io/messinmaisoui/pen/eBrYmV

[Invité]

Bonjour,

une solution : http://codepen.io/jreaux62/pen/vyjLJZ

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="actu-width actu-over">
  <h2>MEETING DE FRANCE</h2>
  <div class="actu-fond" style="background-image: url('http://placehold.it/310x200');"></div>
</div>
<div class="actu-width">
  <h2>Article 2</h2>
  <div class="actu-fond" style="background-image: url('http://placehold.it/310x200');"></div>
</div>
<div class="actu-width">
  <h2>Article 1</h2>
  <div class="actu-fond" style="background-image: url('http://placehold.it/310x200');"></div>
</div>

Code css :

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
.actu-width {
    width: 310px;
    height: 200px;
    display: inline-block;
    text-align: center;
    border: 2px solid white;
    margin-top: 30px;
    word-wrap: break-word;
    overflow: hidden;
}
.actu-width:not(:last-child) {
    margin-right: 5px;
}
.actu-width h2 {
    padding-top: 15px;
    font-size: 24px;
    color: #f49128;
}
.actu-width {
  position:relative;
}
.actu-fond { 
  position:absolute;
  width:100%; height:100%;
  top:0; left:0; right:0; bottom:0;
  background-size:cover;
  z-index:-1;
}
.actu-width .actu-fond { 
  opacity:0.4;
}
.actu-width.actu-over .actu-fond,
.actu-width:hover .actu-fond { 
  opacity:1;
}

[bloups0]

Du coup, c'est bien ce que je pensais, je suis obligé de mettre en position absolute mes textes présent dans mon div.

Merci à vous deux !

[Invité]

Benhhh non...