Créer des vignettes redimensionnables

On n'effectue pas véritablement un redimensionnement de l'image en tant que tel. Il s'agit d'un redimensionnement spécifique à la zone de la vignette survolée par la souris. Comment faisons-nous cela ? En utilisant la propriété CSS overflow !

La propriété overflow détermine l'apparence du contenu lors du survol de la zone contenante. Si le conteneur a une taille fixe, pour une raison ou une autre, on utilise alors overflow pour définir ce qu'il se produit. Les valeurs possibles pour la propriété overflow sont : visible, hidden, scroll et auto. C'est la combinaison de ces valeurs que nous utiliserons ici afin que notre astuce puisse marcher. Fondamentalement, nous cacherons une partie de la vignette dans son état de base, et nous la montrerons entièrement lors du survol de la souris.

L'idée qui se cache derrière tout ceci est de placer une image dans un certain conteneur. Étant donné que l'on aborde les vignettes, ce conteneur sera une balise <a>. On définit la taille (largeur et hauteur) du conteneur avec les valeurs souhaitées et on met la propriété CSS position du conteneur à relative. L'image incluse a une position absolue. On utilise des valeurs négatives à haut et à gauche pour déplacer l'image. Le conteneur voit sa propriété overflow mise à hidden. Ainsi il n'y aura qu'une seule partie visible de l'image dans sa zone. Le reste sera caché, donc hidden. Pour a:hover, on met à la propriété overflow du conteneur la valeur visible, et on affiche l'image en entier.

Cette astuce peut être utilisée pour les listes de vignettes ou une seule, comme indiqué sur la page de demo. Pour le code, on utilise des balises standards :

<a href="#"><img src="image.jpg"  alt="mon image" /></a>

L'état initial des vignettes pourrait se présenter comme suit :

ul#thumbs a
{
    display     :   block;
    float       :   left;
    width       :   100px;
    height      :   100px;
    line-height :   100px;
    overflow    :   hidden;
    position    :   relative;
    z-index     :   1;
}
 
ul#thumbs a img
{
    float       :   left;
    position    :   absolute;
    top         :   -20px;
    left        :   -50px;	
}

La balise <a> a une certaine largeur et hauteur pour les éléments qui entrent en compte dans la conception de votre site. De même, overflow est mis à hidden. On manipule par la suite les valeurs négatives en haut et à gauche pour "rogner" l'image et la mettre à la taille souhaitée. Si vous voulez aller plus loin, vous pouvez définir une zone de rognage pour chaque image de votre liste et cibler précisément la zone que vous voulez montrer.

ul#thumbs a img
{
    float       :   left;
    position    :   absolute;
    top         :   -20px;
    left        :   -50px;
}
 
ul#thumbs li#image1 a img
{
    top         :   -28px;
    left        :   -55px;	
}	
 
ul#thumbs li#image2 a img
{
    top         :   -18px;
    left        :   -48px;
}	
 
ul#thumbs li#image3 a img
{
    top         :   -21px;
    left        :   -30px;	
}	
.
.
.

Dorénavant, lorsque l'utilisateur survole l'image avec la souris on met overflow à visible :

ul#thumbs a:hover
{
    overflow    :   visible;
    z-index     :   1000;
    border      :   none;
}

Notez l'utilisation de z-index pour le conteneur par défaut et celui survolé. Cela est extrêmement important étant donné que nous voulons placer l'image survolée au-dessus des autres. Autrement elle se retrouverait dessous et notre astuce serait incomplète.

Tous mes remerciements à romaintaz pour sa relecture.