Discussion :

[bloups0]

Bonjour,

J'ai un petit souci,

Je dois, lorsque l'on passe avec la souris sur une image, afficher un filtre noir qui prend 50% de l'image, et un texte dessus. Seulement, je ne sais pas comment faire, le souci étant qu'il faut que je passe sur une classe A pour afficher une classe B, je ne sais pas vraiment comment faire...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="col-md-3 col-sm-6 col-xs-6 marg-top">
	<div class="relative">
		<div class="plus-push-img">
			<a href="http://concortel.galago.fr/wp-content/uploads/2016/08/415381.jpg" class="group1 cboxElement"></a>
		</div>
		<div class="cat">
			<p>Chambre et suites</p>
		</div>
		<p class="cadre"></p>
		<img src="http://concortel.galago.fr/wp-content/uploads/2016/08/415381.jpg"><p></p><p></p>
	</div>
</div>

Et voila le CSS associé

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
 
.relative {
    position: relative;
}
.plus-push-img a {
    width: 40px;
    height: 40px;
    background-image: url(http://concortel.galago.fr/wp-content/uploads/2016/08/plus.png);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.cat {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    text-align: center;
    opacity: 0.5;
}
.cat p {
    font-family: Brandon_blk;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 1 !important;
    color: white;
    padding-bottom: 66px;
    padding-top: 10px;
    background: black;
    letter-spacing: 2px;
    overflow: hidden;
    height: 100px;
    word-wrap: break-word;
}
.relative p.cadre {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.relative p.cadre img {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 200px;
}

Et voilà le lien du site : http://concortel.galago.fr/fr/lhotel-en-images/

Donc, se serai lorsque l'on passe sur la classe relative, que l'on affiche le contenu actuel. Et si, au passage, vous avez une solution pour que le text entre les balises <p> ne soit pas "touché" par l'opacité à 0.5, je suis prenant !

[Invité]

Bonjour,

les codes que tu donnes sont insuffisants (voir sur codepen : http://codepen.io/jreaux62/pen/LkvZZZ)

Sinon, au lieu d'utiliser opacity:0.5;, il y a aussi background:rgba(0,0,0,0.5);, qui n'impacte pas les textes ou autres.

[bloups0]

Le souci viens peut être du fais qu'il n'y a pas bootstrap d'inclue dans ton code.

En effet, avec rgba, aucun souci au niveau du texte, merci !

http://concortel.galago.fr/fr/lhotel-en-images/

Ici, tu auras tout les éléments de css présent dans la page.

[Invité]

Bonjour,

1/ codepen permet justement d'inclure facilement différentes librairies, scripts,... (via les petites icones à coté de "CSS" et "JS" -> "Quick-add").

2/ Je vois bien ta page, mais je ne sais pas exactement ce que tu veux faire...
Je ne vois pas de CSS :

Code css :

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

1
2
3
.relative:hover{
...
}

"on affiche le contenu actuel..." ??

[bloups0]

Le contenu actuel (l'image avec background) ne doit jamais être affiché, sauf lorsque l'on passe sur l'image, c'est pour ça que j'avais commencé a mettre le hover sur le relative, mais comme le texte est sur une autre classe, qui ne fais pas 100% de cadre ça peux pas marcher. Si je n'ai pas plus de CSS, c'est que je n'ai justement pas d'idée.

Pour codpen, le soucis risque d'être les élélents CSS liée au thème de wordpress.

[Invité]

Bon.

Code :

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

1
2
.relative .cat { display:none; }
.relative:hover .cat { display:block; }

Je ne vois pas où était la difficulté...

[bloups0]

Je mettais le hover sur le .cat, et pas sur le relative, je ne savais pas qu'on pouvais faire ainsi, merci pour la réponse.

Quand on sais faire, en effet, il n'y a pas de difficulté.