Dans ce nouveau tutoriel shopify nous allons voir comment faire un effet de zoom original sur les images d’une boutique Shopify !

Vous pouvez voir le résultat ici: https://dgeodev.myshopify.com/

Comment installer le code ?

Rendez-vous dans Boutique ne ligne – Actions – Modifier le code et ouvrez le dossier Assets ! A ce stade vous devez trouver votre fichier style .scss.liquid ou .css.liquid ou .css ! généralement theme.scss.liquid ou timber.scss.liquid ou style.scss.liquid.

Mettez vous tout en bas du fichier et copiez/collez le code suivant:

.cont-scale img {      
  transition: transform 1s;      
}
.cont-scale:hover img {     
  transform: scale(1.1) rotate(0deg) ;
  transition: transform 3s;    
}

Comment modifier les options ?

Vous pouvez modifier les valeurs en degré ou unité pour les paramètres suivants:

  • Rotate: degré de rotation (mettre 0 pour ne pas en avoir)
  • Scale: intensité du zoom,
  • Transform: temps de l’exécution de l’effet

Ou activer l’effet ?

Alors la c’est assez compliqué et je vous invite donc à visionner la vidéo ci-dessous 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 5 commentaires

  1. Bonjour,
    Un grand merci pour tous les tutos bravo à vous!

    Petit problème avec celui ci, bizarrement l’effet de loupe se fait une fois que je suis descendu tout en bas de la page? cela marche mais en remontant lol merci!

    1. La classe conteneur ne doit pas être mise au bon endroit 🙂 essayez de la mettre sur un parent plus proche de l’image

  2. C’est bon ca marche!

    Bravo encore a vous! et merci

  3. Bonjour juste pour savoir du coup sur mobile cela ne peut pas fonctionner?

    Merci!

    1. Hello, exactement car le survol souris n’existe pas sur mobile 😉

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine