Comment puis-je créer un effet de zoom d'image au survol en utilisant uniquement la transformation CSS3 ?

Effet de zoom d'image CSS au survol avec transformation CSS3

La création d'un effet de survol qui zoome sur une image peut être obtenue sans effort à l'aide de la propriété de transformation de CSS3 . Cette approche nécessite un minimum de code et offre une amélioration visuelle élégante sans avoir besoin de tableaux complexes ou de divs de masque.

Mise en œuvre

Pour créer l'effet de zoom, suivez ces étapes :

1. HTML : Placer l'image dans un conteneur élément.

<div class="thumbnail">
    <div class="image">
        <img src="image.jpg" alt="Your image">
    </div>
</div>

2. CSS : Appliquez les styles CSS pour contrôler le zoom de l'image.

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);
}

• La propriété transition définit la durée et la fonction d'assouplissement de l'effet de mise à l'échelle.
• La propriété transform: scale() met l'image à l'échelle lorsque le curseur survole le conteneur.

Exemple

Voir l'exemple de violon suivant : https://jsfiddle.net/rkd3x4uc/

Remarque :

• La propriété zoom, qui s'applique directement zoomer sur une image, n'est pris en charge que dans Internet Explorer. La propriété transform: scale() est préférée pour la compatibilité entre navigateurs.
• Pour contraindre l'image mise à l'échelle dans les limites du conteneur, vous pouvez ajouter overflow: Hidden à la classe .image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!