Overlaying Title on Featured Image

  • The link is a sample post and I have a large Featured Image at the top with the article title below and that featured image is way too large, but since I don’t know that I can decrease the size that easily, the next best thing would be to overlay the article title on top of the image. Since I know that the standard block styling doesn’t allow this, is there a way I can do this with CSS?

    I’ve tried several things and nothing seems to work. Perhaps I’m just not thinking of it the right way? I did try once to add a negative margin to the title, but it wouldn’t move upwards at all.

    Any help would be appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • You mean like this ? https://nimb.ws/8W9mHB

    Moderator bcworkz

    (@bcworkz)

    You could add something like the following to the customizer’s Additional CSS section:

    h1.wp-block-post-title {
    position: relative;
    top: -500px;
    color: white;
    text-shadow: 2px 2px 3px #000;
}
.entry-content.wp-block-post-content.has-medium-font-size.is-layout-flow {
    margin-top: -6em;
}

    Or instead you really could reduce the featured image display size with CSS if you preferred:

    .wp-block-post-featured-image.alignwide img {
    width: 50%;
}
    Thread Starter OscarGuy

    (@oscarguy)

    Thanks, all.

    Supratim. That’s the gist. Not exactly the placement I would want, but that’s the essence of what I’m looking for.

    Bcworkz, I could lower the featured image size, but what I’d prefer to do is to have it situated into the main post on the side of the image with the body of the post wrapping around it. I couldn’t figure out how to do that either.

    Moderator bcworkz

    (@bcworkz)

    You get text wrap by using float: on the partial width image container. For example:

    figure.wp-block-post-featured-image {
    width: 50%;
    float: left;
    margin-right: 1em;
    top: 50px;
}

    However, because the title occurs in HTML after the figure container, it also wraps around the image, making it half width. For it to be full width above, it should occur before the figure element. Perhaps you could rearrange the order of elements with CSS alone by using the flex box model, but ideally the HTML itself would be reordered.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Overlaying Title on Featured Image’ is closed to new replies.