[Résolu] Problème de clignotement à l'utilisation d'un :hover

Bonsoir,

Je suis confronté à un problème particulièrement chronophage :

Dans le cadre du développement de mon blog, je souhaite faire apparaître les articles sur la home sous forme de vignettes.

Cependant, pour les utilisateurs puissent voir de quoi traite chaque article, des informations sont visibles au survol de la vignette, en apparaissant par dessus celle-ci.

En plus de cette surimpression du descriptif de l'article, l'image de fond change, avec l'effet de porte coulissante en CSS, pour afficher une image floutée, intégrée dans le sprite.

Voici la maquette du site, pour servir d'exemple : https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-snc6/178450_4775235177180_294614288_o.jpg

Concrètement, on voit que la première vignette est devenue floue au survol de la souris grâce aux portes coulissantes (deux images en une seule).

Ensuite, grâce au :hover, j'appelle la <div> comprenant le texte et je lui demande d'être affichée (display: inline-block).

Le problème est que lorsque la souris se déplace sur le texte celui-ci "clignote".

Selon moi la raison est que la souris passe du texte au fond, et change l'état du :hover.

Ce qui ne devrait pas avoir lieu étant donnée que l'image affichée en dessous du texte correspond justement à l'état :hover.

De plus, dans un soucis de clareté, j'ai entouré la zone du texte par une balise <a> pour le rendre entièrement cliquable, et donc être sûr que l'ensemble de la zone est une sorte de layer au dessus de l'image, pour éviter que le curseur entre en relation avec cette image.

En cherchant bien, j'ai trouvé deux solutions qui règlent ce problèmes :

Utiliser un pointer-events: none sur la div du texte, qui permet d'avoir toujours le focus sur l'image, et donc d'éviter de perdre le focus du texte.

Seul problème, IE ne reconnaît pas pointer-events, et c'est très contraignant.

Deuxième solution qui est mitigée, c'est d'utiliser -webkit-transition-property, qui corrige ce soucis de focus.

Gros problème de ce côté, la div qui contient le texte varie bizarrement d'opacité en même temps que l'image de fond, et dans tous les cas ça pose d'autres contraintes.

Concrètement, je cherche une solution qui puisse me permettre de flouter une image au survol de la souris, et d'ajouter du texte, cliquable, par dessus.

Pour le flou, j'ai pensé au SVG, mais l'image était légèrement cropée sur un côté. Pareil pour le flou en CSS qui avait tendance à déborder, même en définissant le width/height et un overflow: hidden.

Pour moi, la solution, bien que pas optimale, réside dans les portes coulissantes, pour ce qui est de l'image.

Donc, quid du text qui clignote/scintille?

Voici la partie HTML/PHP

<div class="post">
	<div class="thumbnail">
	<?php the_post_thumbnail('thumbnail'); ?>
	</div>
	<a href="<?php the_permalink(); ?>" class="preview">
	<p>Informations sur l'article.</p>
	</a>
</div>

Et pour la partie CSS :

.post{
	width: 695px;
	height: 200px;
	margin: 0px 0px 32px 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}
	
	.thumbnail:hover img{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
		top: -200px;
	}

	.thumbnail:hover+.preview{
		display: inline-block;
	}
		
	.preview{
		width: 695px;
		height: 200px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
		top: -406px;
		display: none;
		background: rgba(20, 20, 20, 0.1);
	}

A ce propos, si quelqu'un peut m'expliquer pourquoi je dois corriger de -6px mon .preview{ top: -406px}, ce serait gentil!
Modifié par seeane (08 Nov 2012 - 21:47)

Je présume que tu code en HTML5.

Il serait plus simple que ta div .post soit le lien vers le post, et du coup cliquer sur tout ce qu'elle contient emmène l'utilisateur vers le post.

Il serait aussi plus simple que tu utilises le :hover sur ce même lien (qui contient maintenant tout le contenu qui concerne un post).

Du coup tu as quelque chose comme :

<a href="ton-post/">
    <img src="ton-thumbnail.jpg" />

    <div class="description">
        L'introduction de ton article
    </div>
</a>

Ensuite pour a:hover, tu fais a:hover img pour bouger l'image et afficher la version floue, et a:hover .description pour déplacer ton texte.

Bonjour,

pourquoi ne pas appliquer le :hover sur ta classe post ? Ça devrait - je crois - résoudre ton problème, puisque cela inclura ton élément preview dans le :hover.

La question subsidiaire des 6px revient à mon avis à un "bête" problème de marge, padding ou line-height. Au choix

Merci à vous deux pour cette solution à laquelle je n'avais effectivement pas pensé... Peut être parce que j'utilisais ma classe="post" autrement.

J'essaie ça ce soir et je reviens vers vous pour vous donne le résultat!



EDIT: après un bref essai, ça semble fonctionner PAR-FAI-TE-MENT. Je vérifierai cependant ce soir, et je regarderai si ça entre dans la logique de ma syntaxe.

Un grand merci à vous.

EDIT: Tout marche impeccablement, merci encore!
Modifié par seeane (08 Nov 2012 - 21:47)