Overlay post title over featured image – Themeco Community

Overlay post title over featured image

Andrew — Thu, 21 May 2015 01:38:18 +0000

Is there a way to do this with CSS?

Reply To: Overlay post title over featured image

Rad — Thu, 21 May 2015 03:29:18 +0000

Hi there,

Thanks for posting.

Depends on site’s structure. What stack you’re on? Would you mind providing some url where you wish to apply this?

Thanks!

Reply To: Overlay post title over featured image

Andrew — Thu, 21 May 2015 03:54:14 +0000

This reply has been marked as private.

Reply To: Overlay post title over featured image

Rad — Thu, 21 May 2015 04:52:36 +0000

Hi there,

Thanks! I’m assuming you’re referring to recent posts at your home page. In that case, please add this css 😉

.x-recent-posts a {
  position: relative;
}
.x-recent-posts .h-recent-posts {
  position: absolute;
  z-index: 9999;
  margin-top: -50px;
  background-color: rgba(255,255,255,0.7);
  width: 100%;
  left: 0;
  padding: 10px;
}

Hope this helps.

Reply To: Overlay post title over featured image

Andrew — Thu, 21 May 2015 05:34:52 +0000

No, I mean when you view a specific post, I’d like to overlay the title on the featured image.

For example: https://wordpress.org/plugins/wysija-newsletters/

Reply To: Overlay post title over featured image

Paul R — Thu, 21 May 2015 05:59:02 +0000

Hi,

In that case, please replace the code with this.


.single-post .entry-title {
  border-radius: 10px;
  position: relative;
  margin-top: -100px;
  z-index: 9999;
  margin-bottom: 30px;
  margin-left: 30px;
  background: #000;
  width: auto;
  float: left;
  color: #fff;
  padding: 10px;
}

Hope that helps.

Reply To: Overlay post title over featured image

Andrew — Thu, 21 May 2015 11:39:35 +0000

PERFECT! Thank you!!!

Reply To: Overlay post title over featured image

John Ezra — Thu, 21 May 2015 12:09:26 +0000

You’re most welcome!

Reply To: Overlay post title over featured image

Michael Burton, CFP® — Fri, 18 Sep 2015 19:59:03 +0000

I think I am asking the same question, but just to be sure: I want to feature one to three single images on the home page of my blog. I would like the option to have the title of the post overlay on top of the image. Is the way to do this to use the css code above?

If so, what is it going to look like? Can you point me to a sample page that is using the same CSS code?

Thanks so much!

Reply To: Overlay post title over featured image

Rue Nel — Sat, 19 Sep 2015 02:09:11 +0000

Hello There,

Thanks for updating this thread! The code that is working for Andrew is only applicable in single post. As I understand, you want something that will be in your blog page.

At this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

To assist you with the issue, it would be much better if you also provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.