Élargissement d'images au passage de la souris

Bonjour,

Je gère actuellement un forum MyBB et je souhaite y imposer une limite de taille maximale pour les images (max-height & max-width) en intégrante un effet d'élargissement de celles-ci au simple passage de la souris (dans cet esprit), le tout uniquement en CSS...

J'ai déjà essayé avec jQuery (pour un système de lightbox, plus simple), mais il y a des problèmes de conflits avec le script MyBB !

J'abouti à un résultat avec ce code CSS, mais non concluant bien sûr, le problème étant, je pense, qu'il est compliqué voir impossible d'utiliser du float sur un forum...

Donc en clair, il faudrait que l'effet d'agrandissement s'applique de façon centrée (sur l'image d'origine réduite), adapté à la taille de l'image. Je pourrais imposer une limite fixe, mais ce n'est pas que je recherche, mais bien une limite de taille maximale, pour un minimum de souplesse.

Donc voici le CSS avec lequel j'obtiens le meilleur résultat jusque là :

a.zoom {
    text-decoration: none;
    display: block;
    height: auto;
    max-height: 350px;
    width: auto;
    max-width: 750px;
    margin: 0 3px 3px 0;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a:hover.zoom {
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    z-index: 99;
}

img.zoom
{
    max-height: 350px;
    max-width: 750px;
}

C'est brouillon, je sais, je ne suis pas vraiment doué à vrai dire !

Alors si vous avez donc une idée de comment je pourrais m'y prendre, je prends !
Je vous remercie par avance pour votre aide !
Modifié par verspax (24 Sep 2014 - 18:40)

salut,
si la classe "zoom" devait être appliqué aux <img>, un exemple de code pourrait donner :

a {
    display: table;
    margin: 0 3px 3px 0;
    text-decoration: none;
    -moz-transition:.25s ease-out;
    -webkit-transition:.25s ease-out;
    -o-transition:.25s ease-out;
    transition:.25s ease-out;
}
a:hover .zoom {
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
}

img.zoom {
    max-width: 750px;
    max-height: 350px;
}

Je n'ai pas testé donc à voir...

Même problème (que je n'ai même pas exposé en premier post d'ailleurs... )

Pour les images "carré", l'effet s'active hors de l'image, en passant la souris sur la droite jusqu'à deux fois la taille de l'image. Le seul cas pour le quel ça fonctionne très bien, c'est pour les images en format panoramique (large).

Trop compliqué j'abandonne, je change même carrément pour SMF, j'aurais pas de problème de conflit avec jQuery pour commencer !

Merci pour ton aide, tout de même !