28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

D'habitude, je me débrouille avec les sujets déjà traités mais là je dois avouer que je bloque ! Donc je me lance Smiley smile

Je suis entrain de développer un thème Wordpress sous forme de portfolio. Un truc très simple et la seule folie que je m'autorise ne fonctionne pas.

Je souhaiterai que le titre de l'image et sa description (placés dans un DIV) apparaissent au survol de l'image en question.

Je sais qu'il existe des solutions Javascript mais cela m'étonne fortement que cela ne soit pas possible en CSS ?

J'ai volontairement simplifier le code:


<div class="postc">
<div class="desc">
<h2>Mon titre</h2>
<p>Ma description</p>
</div>
<img src="..." />
</div>



.postc
{
	width: 25%;
	max-width: 480px;
	float : left;
}

.postc img
{
	width: 100%;
	height: 100%;
	max-width: 480px;
	float : left;
}

.postc img:hover
{
	opacity:0.5;
}

.desc
{
	position: absolute;
	width: 25%;
	z-index: 2;
	display: none;
}

.desc p
{
	margin: 20px;
	font-size: 80%;
	text-transform: uppercase;
}

.postc img:hover .desc
{
	display: block;
}


J'ai également essayé avec "visibility" et avec un "span" à la place du "div"... sans succès...
Merci de votre aide Smiley smile
Modifié par sh3fla (13 Jul 2013 - 16:34)