- This topic has 9 replies, 2 voices, and was last updated 1 year, 1 month ago by Leo.
September 7, 2020 at 5:41 pm #1434575troyw
Using your Generate Blocks, I am trying to place some text over some images using ‘Cover Block’. However I am unable to position the text in the top left corner when I use this. Cover Block seems to default to the centre of the image block and cannot be moved?
How can I overlay a small header and small piece of text, with maybe even a small divider image and position it where I want it?
Please update hostfile IP to 22.214.171.124 to view development website
CheersSeptember 7, 2020 at 6:43 pm #1434600LeoStaffCustomer Support
Cover block is not actually a block from GB.
Perhaps the full width container block is what you are looking for?
Then you add a headline block inside of it.
Let me know if this works better 🙂September 7, 2020 at 7:20 pm #1434611troyw
I have tried this, but still I am not able to position the text. It is always in the middle, regardless of whether I use a container with Background image or a container with an image in it. I can set the alignment to left, middle or right, but cannot adjust the height of the text in order to position it to the top left of the box?September 7, 2020 at 7:52 pm #1434637LeoStaffCustomer Support
Any chance you can provide a screenshot of what you have right now?
You can use a service like this:
Or an example of what you are trying to create would be very helpful as well.
Let me know 🙂September 7, 2020 at 8:12 pm #1434655troywSeptember 7, 2020 at 8:57 pm #1434692troyw
Sorry, while we are looking at these containers, please could I also ask how to create a ‘Mouse over’ effect?
I have tried using the CSS shown here https://docs.generatepress.com/article/add-a-zoom-effect-on-hover-to-post-images/ and here https://generatepress.com/forums/topic/mouseover-blog-efect/ but neither seem to work. I have put ‘post-image’ into the CSS class for the container, but the background image does not react? I am just looking to create some kind of movement to the image or container, when a mouse is hovered over it.
CheersSeptember 7, 2020 at 10:02 pm #1434726LeoStaffCustomer Support
To create that layout, you would need to add a container block with a background image, then add lots of bottom padding in comparison to the top padding so the bottom of the image shows more, then the headline block inside the container should see at the by default.September 7, 2020 at 11:38 pm #1434785troyw
I have been trying this, but even if I create a new container and then put the header and content in, when I move the Top or the Bottom padding, the background image gets longer as well. I already have the background image in its own container and at the perfect size, but even with a seperate container for the text, the text container messes up the other container size?September 8, 2020 at 2:01 am #1434907troyw
I’ve finally managed to get the headings fixed, though have had a fair bit of trouble with containers merging without notice and things not sizing consistently. I’m still not quite sure how I did it, but it looks OK.
ThanksSeptember 8, 2020 at 8:13 am #1435516
- You must be logged in to reply to this topic.