-
2 questions really.
1. is there a better way beside using max width, max height, to make a round container? We have them set to 250px.2. How can we vertically center the contents? As you can see on the page in the private area, You have an icon showing, mouse over and see the text. We’d like icon and text to be in center. In the back end, we have the text headline h3, and under that the headline with just the icon.
-
Hi there,
1. That’s the most secure way to prevent sizing change of the element. I would recommend setting border-radius to 100% instead of 180px.
2. You are using opacity:0 to hide the text, but the text is still there, occupying its position. You can try setting its position to absolute, so the h3 will not occupy any space.
-
OK we seem to have a bit of conflict. We always meant to make the container clickable. We followed instructions to change to a clickable container, and now the text and icon are no longer lined up. It seems the position alignments aren’t compatible?
Is there a way to have BOTH the clickable container, AND the icon lined up on text during the hover?
The icon should disappear on hover. The text should appear on hover. They should both be centered vertically. Is it a z-index thing, or is there a way to do this?You can see the one on the left, the whole container is clickable but the alignment is wrong within. The middle one the alignment is correct but the container isn’t clickable.
-
Take the middle one as example:
Select the container gb-text-c11cbefc, set its
insert(top,right,bottom,left) all to0. This will make the whole container clickable. -
Yes. But now the icon isn’t over the same spot when I hover over it. The text when hovered now appears above it. What do I need to do to make them swap places while the container is clickable?
Also, changing the h3 following the instructions for making it clickable to seems to have lost hiding the text until we hovered. I did try and put that back with the a. Here is how that part is set up. Image. I’ve tried setting opacity but it isn’t doing anything now.
-
Let me try and clarify:
What we want:
We want an icon to be swapped out for linked text within a container. In other words, the text does not initially show — only the icon should be showing. When the container is hovered, we want the text to replace the icon.
We want the container to be clicky as per your instructions here: https://learn.generatepress.com/blocks/block-guide/add-container-links/#building-our-container-with-linkThe problem(s):
The hover doesn’t seem to work at all on a clickable container. The on-hover text apparently only works with Paragraph or H tags, an not the A tag that is needed to make the container clickable according to the #building-our-container-with-link instructions.
Currently, we got the container to be clickable on hover, but we’ve lost the vertical alignment so that the magnifier icon and the text can swap out in the same position. We had that working before we tried to make the container clickable, but now as you can see the text and icon blocks are stacked one above the other instead of each one being vertically centered.
-
Hi there,
Try this instead — remove the
has-container-linkclass from the container, then set the container’s tag name to<a>:After that, you can set the link directly on the container.
-
Thank you! That worked!
-
You’re welcome, glad to hear that!
- You must be logged in to reply to this topic.