Comment créer un effet de zoom CSS au survol sans tableaux ni masques ?

Effet de zoom CSS au survol à l'aide de Transform

Question :

Comment puis-je créer un effet de zoom au survol de la souris une image HTML sans utiliser de tableaux ni de masque divs ?

Réponse :

Utilisation de la propriété Transform avec Scale

Envisagez d'utiliser la propriété transform de CSS3 pour obtenir un zoom- comme effet en utilisant l'échelle. Voici comment :

HTML :

<div class="thumbnail">
    <div class="image">
        <img src="path/to/image.jpg" alt="Image hover effect">
    </div>
</div>

CSS :

.thumbnail {
    width: desired-width;
    height: desired-height;
}

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

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

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

Explication de la démo :

• La valeur scale() indique le multiplicateur pour le la taille originale de l'image, ce qui entraîne un effet de zoom de 25 %.
• La propriété de transition spécifie la transition en douceur de l'effet de zoom.
• Cette approche évite d'utiliser des éléments supplémentaires ou des astuces CSS, ce qui en fait un simple et efficace pour obtenir l'effet de zoom souhaité.

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!