Miniatures en Css

overflow

Ce didacticiel est destiné à contrôler la taille des vignettes apparaissant sur votre page. Le but de cet astuce est d’afficher l’image en taille réduite et de la mettre en taille normale quand l’utilisateur passe la souris au-dessus.

Jetez un oeil à la démo | Télécharger le fichier zip

Aperçu

Il s’agit d’un redimensionnement de la zone visible du pouce sur la souris sur. Comment faisons-nous cela? L’utilisation de la propriété overflow!
Le dépassement de la propriété définit l’apparence du contenu quand il déborde le conteneur. Si le container a une taille limitée, pour une raison ou une autre, alors que nous utilisons pour définir dépassement de ce qui se passe. Les valeurs possibles de dépassement de la propriété sont visibles, cachées, et de faire défiler automatiquement. C’est la combinaison de ces valeurs que nous allons utiliser ici et de faire de cette astuce.

Fondamentalement, nous cachons une partie de l’aperçu de l’état par défaut quand, et nous la montrons entièrement au passage de la souris.

Le Concept

L’idée sous-jacente est, pour placer une image dans un conteneur.Nous avons fixé la taille (largeur et hauteur) du conteneur et les valeurs que nous fixons à la position du conteneur. Image à l’intérieur dispose d’une position absolue. Nous utilisons une valeur négative en haut et à gauche, les valeurs servent à compenser l’image. Conteneur a donc un débordement caché, seule une partie de l’image qui est placée à l’intérieur du conteneur de la superficie effectivement sera visible. Le reste de celui-ci seront masquées. Sur un: hover nous fixons le conteneur de débordement à visible, et de révéler ensemble de l’image.

css overflow

Le Code

Cette astuce peut être utilisé pour les listes aperçu unique ou vignettes, comme indiqué sur la page de démonstration.

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

Définition de l'état par défaut pour les vignettes serait quelque chose comme ceci:
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;    }

Tag a défini la largeur et la hauteur de ce que s’insère dans la conception de notre site. Aussi, est mis à débordement caché.

Nous avons ensuite jouer avec négative haut et de gauche, les valeurs de « récolte » de l’image pour un ajustement parfait.

Si vous voulez plus loin dans cette direction, vous pouvez définir la zone de culture pour chaque image que vous avez dans la liste du pouce et de cibler la zone que vous souhaitez présenter.

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;    }    

Maintenant, quand l'utilisateur souris-overs il nous fixons le trop visibles:
 ul#thumbs a:hover{     overflow:visible;     z-index:1000;     border:none;      }

Notez le z-index à la fois pour défaut et oscillait conteneur.

Cela est très important parce que nous voulons placer le vol stationnaire au-dessus sinon il serait placé en dessous.

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

trois × 4 =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?