[Support request] Hyperlink on different spots on a picture

[Harvey]

Hi,

Hi, what I want to do is something like this but I would like to seek for your advice how I can do that.

If I have a rectangular picture, let’s take the four corners as four spots. There is a hidden button with one hyperlink on each of the spot. If user clicks on that spot, he will enter to another page.

Do you have any advice how I can do it?

Thanks,
Harvey

[Fernando]

Hi Harver,

This is possible and one approach you may try to achieve this is to have a setup like this: https://share.getcloudapp.com/yAuKxnKD

As shown, the parent container has a class of image-container which we’ll be using for our CSS code later.

Then, setup your Buttons Blocks like this: https://share.getcloudapp.com/xQuqeNqO

The Buttons Blocks should respectively have custom classes

hide-me top-left
hide-me top-right
hide-me bottom-left
hide-me bottom-right

Now, we can add this CSS code:

.my-image-container .gb-inside-container {
    position:relative;
}

.my-image-container .gb-inside-container > .gb-button-wrapper {
    position:absolute;
    visibility:hidden;
}

.my-image-container .gb-inside-container img {
    width:100%;
}

.top-left {
    top:0;
    left:0;
}

.top-right {
    top:0;
    right:0;
}

.bottom-left {
    bottom:0;
    left:0;
}

.bottom-right {
    bottom:0;
    right:0;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Here it is working from my end: https://share.getcloudapp.com/v1ugvnPY

Hope this helps! 🙂

[Author]

Posts