Archived topic
Text over Image
9 replies · Started by troyw on September 7, 2020
Hi team,
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 43.250.140.4 to view development website
Cheers
Hi there,
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 :)
Hey Leo,
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?
Any chance you can provide a screenshot of what you have right now?
You can use a service like this:
https://postimages.org/
Or an example of what you are trying to create would be very helpful as well.
Let me know :)
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.
Cheers
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.
Hey Leo,
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?
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.
Thanks
Glad to hear :)
