Cacher un élément hover

Version imprimable

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:

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:

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 !

19/08/2016, 19h54
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.
20/08/2016, 11h22
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.
20/08/2016, 11h29
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:

1 2 3 .relative:hover{ ... }
"on affiche le contenu actuel..." ?? :koi:
21/08/2016, 04h57
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.

Bon.
Code:

1 2 .relative .cat { display:none; } .relative:hover .cat { display:block; }
Je ne vois pas où était la difficulté...

21/08/2016, 14h51
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é.