Archived topic

Hyperlink on different spots on a picture

1 reply · Started by Harvey on March 10, 2022

Viewing posts 1–2 of 2

March 10, 2022 at 1:33 am #2149127

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

March 10, 2022 at 2:01 am #2149143

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! :)

This archived topic is closed to new replies.

Start building better websites today.