I’ve built a couple of sites recently where we’ve put text and buttons overlaying images. It’s a fairly common design pattern these days, but one that can pose a problem when the image selected for a given module isn’t a high enough contrast from the text.
Enter the gradient overlay!
Here’s a quick Codepen demo to show what this looks like, set up so that the gradient overlay shows up only on hover so that you can see the difference:
See the Pen Overlay Gradient as Caption Background by Zoe Rooney (@zoerooney) on CodePen.
I’ve got the caption overlaying the main element using absolute positioning. In this particular example, I have the image as a background on the main element so that I can scale it using
background-size: cover; (this is also something I do in WordPress sites because I often need to get the file name in the template based on user settings for the page).
Then I’m using a pseudo element as an overlay between the background image and the caption and giving it a gradient background color to add contrast, making the caption easier to read.
Again, the demo only has the overlay on hover but that’s only so that you can see the contrast with and without it.
All the code is in the pen, but just for quick reference here’s how I have the overlay set up using Sass:
background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
The implementation typically goes something like this (this is way simplified, you can see more of the styling if you click through the full example):
In real life, I generally use a couple of media queries to make adjustments as it scales, but hopefully this is enough to get the concept across!