Flip Over Grid Gallery Images

I'm trying to figure out a way to make these graphics flip or turn around on a hover to reveal a fact (written in the gallery description), as if you were turning over a playing card.

if this possible to do with a grid gallery, or is there a better alternative?

https://trivium-trivia.squarespace.com/content

pw: manifest

@Beyondspace Thanks for you reply!! I entered the code as instructed and wasn't able to see any results ☹️

3 hours ago, marleydesigns said:

@Beyondspace Thanks for you reply!! I entered the code as instructed and wasn't able to see any results ☹️

Which gallery are you trying? Can you share some screenshots and leave the URL linked to it?

@Beyondspace The gallery section can be found by scrolling down on the 'Content' page here:

https://trivium-trivia.squarespace.com/content

pw:manifest

I really appreciate your help!! Thank you!

@Beyondspace

20 hours ago, marleydesigns said:

@Beyondspace

It seems that you do not wrap my js on <script></script>

You should add to Settings->Advanced->Code Injection->Footer

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ( window.location === window.parent.location ) {	  
      var galleryItems = document.querySelectorAll(' .gallery-grid-item');	
      for (var i = 0; i < galleryItems.length; i++) {
        var cls = galleryItems[i].className;
        cls = cls.replace(/(^|s)imghvr-S+/g, '');
        galleryItems[i].className = cls + " " + "imghvr-zoom-in";
      }	
    }
  })	
</script>

4 hours ago, Beyondspace said:

It seems that you do not wrap my js on <script></script>

You should add to Settings->Advanced->Code Injection->Footer

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ( window.location === window.parent.location ) {	  
      var galleryItems = document.querySelectorAll(' .gallery-grid-item');	
      for (var i = 0; i < galleryItems.length; i++) {
        var cls = galleryItems[i].className;
        cls = cls.replace(/(^|s)imghvr-S+/g, '');
        galleryItems[i].className = cls + " " + "imghvr-zoom-in";
      }	
    }
  })	
</script>

 

Oh whoops! Okay, so I entered that code as instructed, but it's still not working. Did I enter any other code wrong, or perhaps are there specific settings I need to enable/disable for the plug in to work? I'm lost 😅

Again, I really appreciate your help!!

4 hours ago, marleydesigns said:

Oh whoops! Okay, so I entered that code as instructed, but it's still not working. Did I enter any other code wrong, or perhaps are there specific settings I need to enable/disable for the plug in to work? I'm lost 😅

Again, I really appreciate your help!!

Opp, my code works for gallery section (image section in fluid engine)

You can consider using it

2 hours ago, Beyondspace said:

Opp, my code works for gallery section (image section in fluid engine)

You can consider using it

ohhhh okay! my bad 😅 I added that one instead and its now working, but i'm not able to see the description now 🤔

On 1/7/2023 at 11:13 AM, marleydesigns said:

ohhhh okay! my bad 😅 I added that one instead and its now working, but i'm not able to see the description now 🤔

I check that the descriptions are disable now. Have you turned it on yet?

Oops, that part went right over my head. We're all good. thanks for your help, I know that was probably annoying 😆