Rollover?

Bonjour, pour ma première fois sur ce forum... je viens demander à l'aiiiide!

Je suis actuellement en train de créer mon 1er thème sous wordpress pour un projet sur la musique.
J'aimerais qu'une de mes pages affiche donc des covers (images) d'albums dans une jolie grille, jusque là tout va bien. J'aimerais qu'en passant la souris sur chacune de ces images s'affichent des infos sur cet album comme si celles-ci étaient "cachées" derrière...

Un exemple concret sur cette page: http://svenkacirek.de/

J'ai beau retourner le pb dans tous les sens je ne trouve pas la solution... je suis a peu près certain que c'est du CSS, car il semble qu'il utilise le thème "autofocus pro" qui ne fournit aucun script. J'aimerais donc savoir et comprendre comment cela fonctionne. Si c'est bien du CSS, ou si j'ai raté qqch.

Merci d'avance, et si vous avez besoin de plus d'informations n'hésitez pas à me demander.

Bonjour,

Pas vérifié de visu, mais ça devrait fonctionner :

<div class="pochette">
	<div class="info">
		<!-- Le texte informatif -->
	</div>
	<a href="#"><img src="adresse de l'image" alt=""/></a>
</div>

.pochette {
	position:relative;
	width:200px;
	height:200px;}

.pochette .info {
	width:100%;
	height:100%;
	overflow: hidden;}

.pochette a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;}

.pochette a:hover, .pochette a:focus {
	opacity : 0.1;
	-moz-opacity : 0.1;
	filter : alpha(opacity=10);}

.pochette img {
	display:block;
	width:100%;
	height:100%;}

Modifié par Shunkin (25 Feb 2011 - 13:04)

Bonjour,

Effectivement, c'est tout à fait réalisable en CSS, mais sans l'effet d'apparition progressif qui joue sur l'alpha de la <div> je pense. Ce genre d'effet se fait avec du JavaScript.

Par contre, si une apparition/disparition instantanée de la <div> contenant les informations peut te convenir, alors il suffit de jouer sur la propriété "display" de CSS et la pseudo-classe CSS ":hover".

Edit :
Bon, Shunkin a été plus rapide que moi ! Et en effet, en CSS3 c'est faisable, je me limitais à du CSS2.
Modifié par Maliki (25 Feb 2011 - 13:11)

Merci beaucoup pour ces réponses,

En revanche une petite erreur dans ton code Maliki, l'image dans le code doit être appelé avant la div info:

<div class="pochette"> 
<a href="#"><img src="adresse de l'image" alt=""/></a> 
    <div class="info"> 
        <!-- Le texte informatif --> 
    </div> 
    
</div> 

et l'effet du css3 en plus est parfait.
Je cherchais depuis hier une façon simple de le mettre en place, ça m'a travaillé toute la nuit, mes compétences en CSS/JS etc sont encore très limitée; je vais pouvoir passer a la suite, du coup surement à très vite sur ces forums
Modifié par LEGHUMAIN (25 Feb 2011 - 13:49)

Bon alors, on peut faire mieux. Déjà avec un code HTML plus classe:

<ul id="pochettes">
  <li style="background-image:url(une_image)">
    <a href="une_url_qui_va_bien">Intitulé du lien</a>
  </li>
  <li style="background-image:url(une_autre_image)">
    <a href="une_autre_url">Encore un intitulé de lien</a>
  </li>
  ...
</ul>

Le principe ensuite c'est:
- D'utiliser le LI pour afficher l'image (avec une image de fond, eh).
- De masquer le lien en lui appliquant une opacité très basse (mais pas zéro, et pas de display:none, le lien doit pouvoir recevoir le focus).
- D'utiliser les transitions CSS pour l'effet d'animation (contrairement à l'exemple donné qui utilise du JavaScript).

Ce qui peut donner:

#pochettes {
  overflow: hidden;
}
#pochettes > li {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px 20px 10px 0;
  background-repeat: no-repeat;
}
#pochettes > li > a {
  display: block;
  height: 180px;
  padding: 10px;
  background: red;
  opacity: .01;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear;
}
#pochettes > li > a:hover,
#pochettes > li > a:focus {
  opacity: 1;
}

Pour la compatibilité IE 7-8, on peut éventuellement utiliser un filtre DirectX pour l'opacité, comme dans l'exemple de Shunkin. Pas de transitions CSS dans IE (y compris IE9, qui supportera tout de même opacity).