[Resolved] Text over Image

Home Forums Support Text over Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1434575
    troyw

    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

    #1434600
    Leo
    Staff
    Customer Support

    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 🙂

    #1434611
    troyw

    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?

    #1434637
    Leo
    Staff
    Customer Support

    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 🙂

    #1434655
    troyw
    #1434692
    troyw

    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

    #1434726
    Leo
    Staff
    Customer 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.

    #1434785
    troyw

    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?

    #1434907
    troyw

    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

    #1435516
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.