Jump to content

Having an PNG appear above the image being hovered over in a masonry gallery

Go to solution Solved by ACann,

Recommended Posts

Hi, I am trying to adjust my website so that when someone hovers on an image - a logo appears instead of the captions that appear at the moment on a few of masonry images.

Any advice how to do this would be much appreciated.

Link to comment
11 minutes ago, ACann said:

Hi, I am trying to adjust my website so that when someone hovers on an image - a logo appears instead of the captions that appear at the moment on a few of masonry images.

Any advice how to do this would be much appreciated.

It is possible if we use pseudo element to achieve. Can you share your URL here and we can check it more easily?

If your site is not published yet, provide it with a protected password, share it here so we can access your site

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment

Its www.andycannon.co.uk - some of the images if you hover over you see a caption, some of these are links to portfolio pages. I would like to change that caption to a PNG, but this would change depending on the Caption/Client Logo

Link to comment
  • Solution

<script>
$(document).ready(function() {
    $('.gallery-caption-wrapper p.gallery-caption-content').each(function() {
        if ($(this).text().trim() === "Caption Text") {
            $(this).html('<img src="xxxxxxxx;">');
        }
    });
});
</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.