[Résolu] Affichage texte sur rollover image

Bonjour à tous,

DA Graphiste print dans une agence de communication je me tourne avec intérêts vers le Web.
Je suis donc un petit nouveau sur ce forum qui apparemment regorge de talents

Actuellement en prospection pour un boulot orienté un peu plus webdesign je réalise un site internet pro.......avec mes maigres connaissances en codage (html5/CSS3)...

le but est de concevoir un site harmonieux respectant le W3C et avec un minimum responsive....



Après la réalisation de planches Webdesign je m’attèle au codage et déjà premier soucis...

Je n'arrive pas a superposer un texte au dessus d'une image lors d'un rollover...


Voici un morceau de code.. si quelqu'un peut me donner un coup de pouce...

<section class="portfolio">
<article class="article_portfolio"><a href="#"><img src="img/portfolio/mode_femme.jpg" alt="Mode femme"/><span>MON TITRE MODE<br>sous-titre mode</span></a></article>
</section>

.portfolio {
    margin: 0 50px 0 300px;
    padding: 50px 0;
}


.article_portfolio img {
	width:100%;
	padding-bottom:10px;
}


.article_portfolio a {
	color:#000;
	display: block;
	text-decoration: none;
}


.article_portfolio a span {
	display: none;
	text-align:center;
}

.article_portfolio a:hover span {
	display: block;
	text-align:center;
}

Avec ce code, le texte s'affiche bien au rollover mais il s'affiche en dessous de mon image....

Merci d'avance,
Blackskull
Modifié par Blackskull (16 Mar 2013 - 22:08)

Bonjour,

Une base à vous de l'adapter

Salut,
Tu devrais te pencher sur la propriété CSS "z-index".

Merci pour vos réponses, je teste ça ce soir.

6l20 a écrit :
Bonjour,

Une base à vous de l'adapter

Merci pour cette source, j'ai réussi à l'appliquer à mon cas.

Au lieu de mettre le bloc en extérieur de div et faire un changement de position lors du hover, j'ai joué sur l'opacité.

.article_portfolio span {
	position:absolute;
	margin:0;
	left:0; 
	right:0;
	bottom:0;
	opacity:0;
	height:100%;
	text-align:center;
	font-family: Georgia, Times, serif;
	transition:all .7s;
}


.article_portfolio a:hover span {
	bottom:0;
	opacity:1;
	background: #66BA9B;
	background: rgba(102,186,155,0.8);
	color:#FFF;
}

Encore un grand merci
Modifié par Blackskull (19 Mar 2013 - 21:22)

Au passage, si ça peut aider, j'ai remplacé le <span> par une <div> car j'ai des balises <h> à l'intérieur.

Et d'après ce que j'ai compris (si j'ai bien compris...), un <span> est de type inline et ne peut donc contenir des objets de type block (dont balise titre)...