How to create a Medium.com like featured image effect

[viveknath322]

I would like to create an image effect like in Medium.com’s. There, images have a slight blackish overlay. How I can achieve this using CSS?

[Paulie_D]

There’s several ways to do this…

What have you tried?…A simple Google search for “CSS image overlay” would probably yield many, many options.

[Shikkediel]

They have a very indirect approach but it looks like they’re using a pseudo-element like done here (happened to just made that) :

http://ataredo.com/

#scene:before {
content: "";
width: 100%;
height: 80%;
position: absolute;
top: 10%;
left: 0;
background-color: hsla(0, 0%, 10%, 0.55)
}

Positioning is a bit specific for the site here (so less relevant).
The image itself is set as the background.

[Paulie_D]

I just looked at Medium.com and I can’t see any image overlays…but perhaps I’m missing something.

[Shikkediel]

Wanted to post the same comment but I noticed it shows on subpages :

One such link

[Paulie_D]

Hmmm…same principle but on looking at the example (thanks BTW) they’re not even using an inline image (which I would have thought they should since it ‘feels’ like content to me.

Instead they have a div (with content) overlaying another div which has a background image.

Odd…but perhaps it’s the way they feed the ‘data’ into the page.

[Shikkediel]

Strange indeed, I think the url for the image is taken from the data attribute of the parent and then dynamically converted to an actual link to the file on cloudfront. Quite circumventive altogether.

[viveknath322]

Actually, I tried a plugin for wordpress named Display Featured Image for Genesis(https://wordpress.org/plugins/display-featured-image-genesis/).

I’m trying to add a colour overlay in featured images like in WPMUDEV blog
See this http://premium.wpmudev.org/blog/custom-fonts-css/

[Sara Cope]

Check out the post Design Considerations: Text on Images if you haven’t already.

[Author]

Posts