Comment créer un effet de zoom d'image en survol à l'aide de CSS ?

Effet de zoom sur l'image au survol à l'aide de CSS

Dans le développement Web, l'application d'un effet de zoom sur les images au survol de la souris est un élément de conception courant. Explorons une solution utilisant la transformation CSS3.

Transformation CSS3 pour effet de zoom

La propriété de transformation CSS3 et la fonction scale() permettent des effets de zoom sur les images. Voici un extrait de code :

HTML :

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

CSS :

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

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

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

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

Dans cet exemple, le image div contient l'image. Lorsque l'image survole, l'image est agrandie de 1,25 fois à l'aide de la fonction scale(). La propriété de transition assure une animation de zoom fluide.

Notes supplémentaires

• Vous pouvez ajuster la valeur d'échelle pour obtenir le niveau de zoom souhaité.
• Débordement CSS : boîte cachée être appliqué à l'image div pour masquer toutes les parties survolées de l'image mise à l'échelle.
• La propriété zoom est prise en charge par IE mais pas par d'autres navigateurs.

Démo

Voici une démonstration en direct :

<div class="thumbnail">
    <div class="image">
        <img src="https://placeimg.com/320/240/nature" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

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

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

    .image:hover img {
        transform: scale(1.25);
    }
</style>

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!