Utiliser onmouseover pour changer la taille de l'image avec wp_get_attachment_image impliqué

Question

Ci-dessous une partie du code que j'utilise pour afficher plusieurs lignes de produits avec de minuscules miniatures (35x35 pixels) à côté de chaque produit. C'est une page d'administration que j'ai créée, un peu comme une feuille de calcul pour gérer les produits, donc moins ils prennent de place, mieux c'est.

Tout fonctionne très bien, mais j'aimerais que le client "passe la souris" pour voir une image plus grande. Je comprends comment faire "onmouseover" et/ou travailler avec CSS pour réaliser l'agrandissement de l'image, mais habituellement c'est avec un élément traditionnel <img src... >.

Est-il même possible de modifier ou d'utiliser wp_get_attachment_image pour faire le même effet? Je ne peux pas simplement coller du code dans l'élément <img> parce que c'est "pas là", pour ainsi dire, taper (désolé pour mon manque de terminologie, mais je suppose que c'est une fonction plutôt que du code statique avec lequel je peux travailler).

Ou, est-il un moyen de ne pas définir le tableau (35,35) et juste faire le <li> un certain conteneur de taille, faire l'image remplir ce conteneur, et de travailler avec cet élément pour faire l'altération de l'image?

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li style="display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;">' . $thumbimg . '</li>'; 
    } 
} 

Answer 1

Je l'ai fait avant de 2 façons différentes:

1. Affichez l'image comme une image d'arrière-plan

PHP: (note que je me suis déplacé votre CSS en ligne à rendre plus facile de voir les changements de code)

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image_src($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer" style="background-image:url('.$thumbimg[0] .')"></li>'; 
    } 
} 

CSS:

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer:hover{ 
    background-size: 105%; 
} 

2. Utiliser overflow: caché sur l'élément conteneur pour "culture" la partie visible de l'image

PHP:

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer">' . $thumbimg . '</li>'; 
    } 
} 

CSS:

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    overflow: hidden; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer img{ 
    width: 35px; 
} 
.prodimgcontainer img:hover{ 
    width: 39px; 
    height: 39px; 
    /* move the position of the image slightly so it remains centered */ 
    margin-top: -2px; 
    margin-left: -2px; 
} 

Cette fonctionnera également avec des pourcentages, mais comme vos images ont une largeur fixe, j'ai utilisé ces dimensions pour que ce soit plus clair.

Note:

Ces exemples sont basées sur le travail que je l'ai fait, de sorte que le concept est valable dans les deux cas et devrait fonctionner, mais je l'ai fait, il change le code ci-dessus du haut de ma tête donc ça n'a pas été testé.

J'ai trouvé que l'option 1 facilite le travail avec l'image, surtout si les images sont de tailles différentes ou si elles doivent être réactives.