Overlay image width gradient-linear

[sindreolsson]

Howto add this effect so my post titles gets a better readability when post-titles is added on image.

I am using this theme: http://my.studiopress.com/themes/no-sidebar/

I want to remove the background-color on post-titles and add image overlay with gradient-linear. I want the same effect as you can see here: https://preview.arraythemes.com/candid/ (you need to narrow the width or hover image to see the effect on that theme) same effect is here: http://theultralinx.com.

[Atelierbram]

Can you show what you have so far in a demo?

[sindreolsson]

I dont have much to show. I have tried some tutorials without succsess. All I have is the css on the feature image. You need that?

[Atelierbram]

Can you paste both the html and the css of that feature image in a demo?

[Paulie_D]

Quick content image overlay…

You have to shrink wrap the content image in div…apply position relative.

Add the overlay div inside the wrap and position it absolutely. Apply whatever background color you need..and change the opacity on hover.

http://codepen.io/Paulie-D/pen/xOzPrb

This uses a simple rgba overlay but linear or radial gradients are also possible.

If you want actual text content in the overlay, this would be the optimal method I feel.

If you just want the color overlay, I’d do it with a pseudo-element rather than an actual div.

[Author]

Posts