Sppagebuilder zoom sur image au survol

[poupy]

Bonjour
Je voudrais avoir avec sppagebuilder une image qui lorsque je la survole face un petit zoom sans agrandir la taille de cette image, c'est à dire qu'on zoom à l'intérieur sans pousser les côtés.
Et par dessus cela je voudrais un lien dessus. Savez-vous comment faire ?
Merci d'avance

[poupy]

En fait ce que je voudrais c'est un module responsive avec un zoom et un lien comme sur cette exemple https://codepen.io/codeur-com/pen/MWVLeZL

[toffffe]

Salut
Tu peux regarder https://yootheme.com/widgetkit-joomla-gallery ou encore https://www.joomlack.fr/en/joomla-ex...mage-effect-ck

[lomart]

Bonjour,

Il suffit de faire des règles CSS comme ceci

.myzoom {
  width: 200px;  /* a adapter */
  overflow: hidden;​
}
.myzoom img{
  width: 100%;
  transition: transform .1s;
}
.myzoom img:hover{
  transform: scale(3) translate(30px);
}​

Puis d'adapter le HTML comme ceci

<div class="myzoom"><a href="url"><img src="image.jpg"></a></div>

PS. c'est une bonne idée d'action pour UP

En attendant, si on ne veut pas saisir en mode code, le voici en shortcode UP

{up div=overflow:hidden}
{up attr=myzoom | tag=img | css-head=img.myzoom[width: 100%; transition: transform .1s; ] img.myzoom:hover[transform: scale(1.5) translate(30px); ]}
L'image insérée le bouton image ou media de l'éditeur
{/up attr}
{/up div}
​

[poupy]

Merci à tous les 2
Cela veut dire que c'est déjà intégré dans UP
Je ne m'en suis jamais servie mais il ressort souvent dans les réponses images

[pmleconte]

.....
PS. c'est une bonne idée d'action pour UP
....

https://up.lomart.fr/demo/action-image-magnify ?

Pascal

[lomart]

https://up.lomart.fr/demo/action-image-magnify ?

Pascal

Salut Pascal,

Cette action a comme but de montrer les détails d'une image.
Si le besoin de Poupi est d'attirer l'attention et de proposer un lien, je verrais plutôt https://up.lomart.fr/demo/action-image-hover
Je pensais à une action plus wysiwyg qui apporte un effet à une ou plusieurs images, un peu sur la logique de anim-aos que tu connais bien
Mais il faut laisser décanter…