Salut 

Je ne sais pas si ce que je veux faire est réalisable seulement avec CSS ou si Javascript est nécessaire.

Ce que je souhaiterais :

Normal

:hover

Le texte sans passer la souris sur l'image n'est pas affichée, je la cache avec overflow. J'ai testé comme ci-dessous

article {	
	border: 1px solid green;
	display: inline-block;
	padding: 5px;
	margin: 5px;
	max-width: 330px;
	max-height: 245px;
	overflow: hidden;	

}

article img  {	
	padding :0;
	margin : 0;
	
}

article img:hover {
	opacity:0.1;
}

article p:hover {
	position: relative;
	bottom: 200px;
}

J'ai aussi testé sans overflow: hidden;, mais là le texte évidemment reste affiché.

Est-ce qu'il y a une propriété CSS que je ne connaîtrais pas encore ? 

Merci d'avance.

Salut, je connais une technique avec le jQuery mais il te faudra l'installer. Si tu veux bien l'installer, fait-moi signe et je te dirais comment faire.

( Ne tinquiète c'est à peine 5 lignes )

Donc il n'y a pas possibilité de le faire via CSS ?

mais si, pas besoin de javascript et encore moins de jquery

http://jsfiddle.net/rigs/6bqs5/

Salut, comme ceci avec une transition : http://jsfiddle.net/tEev7/

Foreverx a écrit:

Salut, je connais une technique avec le jQuery mais il te faudra l'installer. Si tu veux bien l'installer, fait-moi signe et je te dirais comment faire.

( Ne tinquiète c'est à peine 5 lignes )

On va encore dire que je râle et que je suis désagréable mais quand même, proposer JQuery pour faire un simple effet avec :hover quand on se dit "confirmé" c'est quand même n'importe quoi, non ?

@ronamazona http://www.doxdesk.com/img/updates/20091116-so-large.gif

nightmat a écrit:

@ronamazona http://www.doxdesk.com/img/updates/20091116-so-large.gif

Oui ça fait peur...

Aaha,

Tu parles mais quand tu connais qu'un seul langage ( et encore, ce n'est même pas de la programmation ) faut éviter de faire le mec qui connait tout en Html.

A croire l'HTML c'est un truc de fou ! mdrr ! Et te prend pas supérieur parce-que tu as " Zéro d'honneur " !

A mon avis je connais deux fois plus de choses que toi. l'HTML sérieux ..

M'enfin si je continu à mon avis j'en ai encore pour 40 lignes.

Tous sa pour dire, que tu fait le mec ( que tu ai 10 ans ou + 40 ans, c'est la même chose ! ), non mais sérieux tu te prend pour qui pour juger, ?

Connais-tu au moins le jQuery avant de parler ?

Et puis pour info, je suis confirmé en HTML qui te dit que c'est le cas en CSS ?

-
Edité par Anonyme 3 décembre 2013 à 12:02:24

@ronamazone c'était un fake hein

Je te laisse le soin de répondre à Foreverx

nightmat a écrit:

@ronamazone c'était un fake hein

Je te laisse le soin de répondre à Foreverx

Hhey, parle, non. Leche ***

Foreverx a écrit:

Tu parles mais quand tu connais qu'un seul langage ( et encore, ce n'est même pas de la programmation ) faut éviter de faire le mec qui connait tout en Html.

Foreverx a écrit:

Et puis pour info, je suis confirmé en HTML qui te dit que c'est le cas en CSS ?

Le fait de proposer jquery dans ce cas démontre ta méconnaissance en HTML/CSS.

Foreverx a écrit:

A mon avis je connais deux fois plus de choses que toi. l'HTML sérieux ..

Non mais sérieux ! Non mais Allo !

Foreverx a écrit:

M'enfin si je continu à mon avis j'en ai encore pour 40 lignes.

Merci de t'être abstenu

Foreverx a écrit:

Connais-tu au moins le jQuery avant de parler ?

Justement, cela n'a aucun intérêt de connaître Jquery dans ce cas puisque que l'on peut s'en passer.

@Foreverx quand on y connait rien on ferme sa grande gueule au lieu d'insulter tout le monde.

nightmat a écrit:

@ronamazone c'était un fake hein

Je te laisse le soin de répondre à Foreverx

Je ne vais même pas prendre la peine de le faire...

En fait j'ai déjà répondu plus haut :
c'est complètement idiot de proposer Jquery pour faire un :hover. C'est d'autant plus triste quand on se dit "confirmé" en HTML5/CSS3.

Du coup je reposte les seules réponses censées :

rigs a écrit:

mais si, pas besoin de javascript et encore moins de jquery

http://jsfiddle.net/rigs/6bqs5/

TyrionGraphiste a écrit:

Salut, comme ceci avec une transition : http://jsfiddle.net/tEev7/

C'est marrant j'ai l'impression qu'on ne va plus te revoir ici...

Foreverx > je crois qu'on va te dire au revoir pour un certain temps, mon grand.

(la grande classe, ta signature, aussi)

C'est ça mon grand, et oublie pas de te brosser les dents avant de dormir.

nightmat a écrit:

Du coup je reposte les seules réponses censées :

rigs a écrit:

mais si, pas besoin de javascript et encore moins de jquery

http://jsfiddle.net/rigs/6bqs5/

TyrionGraphiste a écrit:

Salut, comme ceci avec une transition : http://jsfiddle.net/tEev7/

Merci TyrionGraphiste pour le code! Je vais regarder de plus près en comparant avec celle de rigs car ce sont deux méthodes différentes.

C'est parfait, rapide et propre.

Pas besoin de jquery ?

--> []

La solution de rigs a plus de chances de marcher sur de vieux navigateurs (opacity n'est pris en compte qu'à partir d'IE9), mais le display: none n'est pas à conseiller, et si tu veux une transition, opacity est la meilleure manière de faire un truc joli. A mon avis, la solution de TyrionGraphiste est à privilégier, mais tu peux virer toute mention de position: absolute, absolument (aha) pas nécessaire ici.