• Agrandir une image au survol sans gener ce qui l'entoure

    Aperçus

    Agrandir une image au survolAgrandir une image au survol sans gener ce qui l'entoure

    Explications

    DEMANDE FAITE PAR MINOKOTO
    Dans ce tutoriel, vous apprendrez à agrandir une image au survol sans que ça n'est de répercussion sur le reste de votre page. Je m'explique. Lorsqu'on fait un agrandissement d'image, la plupart du temps, le texte ou le reste du contenu qui se trouve autour, bouge avec. Je vais donc vous montrer une manière de faire un zoom "hors contenu" on va dire.

    Les styles utilisés

    • transform élément qui va nous servir à changer l'échelle de l'image avec "scale"
    • transition élément qui sert à régler le temps de transition au survol
    • z-index élément qui sert à passer au dessus de tout une fois l'image agrandi
    • position élément nécessaire pour que z-index fonctionne

    Html

    Pour commencer, on va créer notre HTML, car il n'y a rien de compliquer à faire.
    On va utiliser l'attribut "class" que l'on va retrouver dans le CSS et le nommer "image".

    <img class="image" src="url de l'image"/>

    Css

    Alors déjà, le css va être composé en deux parties. La première qui montre l'image à son état de départ, la deuxième montrant l'image au survol et ceci et fait grâce à l'attribut :hover que l'on ajoute à la class image.

    .image {
     contenu des styles
    }
    .image:hover {
     contenu des styles
    }

    Passons aux styles, je vous ai expliqué à quoi ils correspondaient plus haut, donc je vous mets le code avec des annotations

    .image {
    transition: 0,4s; /*vous mettez le temps de transition, le reste c'est pour que ça s'adapte sur tous les navigateur */
    -moz-transition: 0,4s;
    -o-transition:0,4s;
    -webkit-transition: 0,4s;
    transform: scale(0.75); /*vous mettez le pourcentage de la taille de départ que vous voulez pour votre image. Par exemple, 1 c'est la taille réelle */
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    }
    .image:hover {
    position: relative;
    z-index: 100;
    transition: 0,4s;
    -moz-transition: 0,4s;
    -o-transition: 0,4s;
    -webkit-transition: 0,4s;
    transform: scale(1); /*vous mettez le pourcentage de la taille de fin que vous voulez */
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    }

  • Commentaires

    1
    Vendredi 12 Juin 2015 à 22:17

    merci !!!! merci !!

    2
    Lundi 15 Juin 2015 à 11:07

    Derien ♥ J'espère que ya toutes les infos dont tu as besoin dedans maintenant :D

    3
    Lundi 15 Juin 2015 à 19:18

    oui merci beaucoup c'est parfait, j'ai tout compris du premier coup ^^ 

    4
    Lundi 15 Juin 2015 à 19:28

    Ha bha tant mieux ♥ ça veut dire que j'explique bien au moins x)

    5
    Lundi 15 Juin 2015 à 19:30

    aaah oui ^^ :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :