How to flip and image embedded as a link?

  • Resolved masterhealerwp

    (@masterhealerwp)


    2 years, 5 months ago

    Please look at the 3 images on this screenshot.

    To get this image, I just copied and pasted within a container the code snippet as provided by Amazon:

    <a href="https://www.amazon.fr/JIAX-Fauteuils-Repose-Pieds-Accoudoirs-Confortable/dp/B09NSQZ9J2?__mk_fr_FR=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=fauteuil+relax+vintage&qid=1656539435&sr=8-6&linkCode=li1&tag=h70-21&linkId=9d87a1609075320736bc8af9b29c72dc&language=fr_FR&ref_=as_li_ss_il" target="_blank" rel="noopener"><img border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B09NSQZ9J2&Format=_SL110_&ID=AsinImage&MarketPlace=FR&ServiceVersion=20070822&WS=1&tag=h70-21&language=fr_FR"></a><img src="https://ir-fr.amazon-adsystem.com/e/ir?t=h70-21&language=fr_FR&l=li1&o=8&a=B09NSQZ9J2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;">

    My question: How can I flip the image horizontally the second image so that it points in the same direction as the image 1 and 3?

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support fernandoazarcon2

    (@fernandoazarcon2)

    Hi @masterhealerwp,

    Try adding class my-flip-horizontal to the image.

    Example:

    <a href="https://www.amazon.fr/JIAX-Fauteuils-Repose-Pieds-Accoudoirs-Confortable/dp/B09NSQZ9J2?__mk_fr_FR=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=fauteuil+relax+vintage&qid=1656539435&sr=8-6&linkCode=li1&tag=h70-21&linkId=9d87a1609075320736bc8af9b29c72dc&language=fr_FR&ref_=as_li_ss_il" target="_blank" rel="noopener"><img class="my-flip-horizontal" border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B09NSQZ9J2&Format=_SL110_&ID=AsinImage&MarketPlace=FR&ServiceVersion=20070822&WS=1&tag=h70-21&language=fr_FR"></a><img src="https://ir-fr.amazon-adsystem.com/e/ir?t=h70-21&language=fr_FR&l=li1&o=8&a=B09NSQZ9J2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;">

    Then, add this CSS in Appearance > Customize > Additional CSS:

    .my-flip-horizontal {
	transform: scaleX(-1) !important;
}

    Hope this helps!

    Thread Starter masterhealerwp

    (@masterhealerwp)

    That works! Thanks a lot.

    Plugin Support fernandoazarcon2

    (@fernandoazarcon2)

    You’re welcome @masterhealerwp!

    Plugin Support fernandoazarcon2

    (@fernandoazarcon2)

    Hi there! We haven’t heard back from you for a while now so we’re going to go ahead and set this topic as resolved. Feel free to reply if you’ll need any more help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to flip and image embedded as a link?’ is closed to new replies.