Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris


3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Freedom Sun
Freedom Sun
Modérateur

https://misterswing.forumactif.com/

MessageFreedom Sun Sam 20 Mar 2021 - 13:52

Bonjour à tous... coucou

J'ai un code qui va dans la "Feuille de style CSS". Cette fonction marche pour tous les formats, dans n'importe quelle version de thème...
Pour ceux qui ont des petits Forums, cela est très pratique !!

Un grossissement au passage de la souris, d'une image ou un smiley, dans vos Blocs de messages !

Exemple en image :

[TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris  Captur71


Vous pouvez :

modifier la vitesse du grossissement de l'image au passage de la souris : all 1s ease;
modifier la taille du grossissement de l'image au passage de la souris (1.6);



Suivant votre version :

PhpBB2 et ModernBB:

Code:
      /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

PhpBB3 et Edge
Code:

       /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody .content img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody .content img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

PunBB

Code:
 /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody  .entry-content img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody  .entry-content img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

Invision:
Code:
 /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody  .post-entry img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody  .post-entry img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

AmesomeBB:
Code:
  /***DEBUT du code faire AGRANDIR L'IMAGE***/
    .post-body .post-content img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    }
    .post-body .post-content img:hover{
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
      -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    }
    /***FIN du code faire AGRANDIR L'IMAGE***/


Déposez le style concerné dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style



Puis penser a cliquer sur le bouton [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris  Sans_t10



Cordialement, Stefano36

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 21 Mar 2021 - 11:46

De rien Stefano,

on fait tous des erreurs cher ami, moi aussi rassures toi lOL .

J'ai édité ton message pour modifier suivant les versions:

https://www.milouze14.com/t32963-toutes-versions-faire-agrandir-l-image-ou-le-smiley-au-passage-de-la-souris#628879

Puis supprimer les messages qui ne sont pas prévus dans cette section.

Chéryl et Freedom Sun aiment ce message

Freedom Sun
Freedom Sun
Modérateur

https://misterswing.forumactif.com/

MessageFreedom Sun Dim 21 Mar 2021 - 12:03

Bonjour Phil,

C'est très correct, je ne vais pas éditer ceci !
Tu as très bien résumé la chose !!
Affaire bâclée pour moi !

Merci encore Phil, t'es un bon 😋

Prenez soin de vous,

Cdlt, Stefano

Chéryl aime ce message

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Dim 21 Mar 2021 - 19:24

Mercimill

Chéryl et Freedom Sun aiment ce message

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum