Hey Pixels! In this week’s tutorial, I’m
going to be showing you how to add a stylish gradient overlay to your images using CSS3.
Be sure to visit my blog, xopixel.com, for all the original code in this tutorial. You’ll
also find many more gradient overlays that you can use for your own web design projects
Applying gradient and color overlays to your images adds a trendy pop of colour without
ever having to open up Photoshop. The HTML in this tutorial is going to be really
simple! All we’re going to use is the
tag and then give it a class called “color-overlay”.
We’re going to be inserting the image in our CSS code.The CSS3 is where all the magic
is going to happen. First, we’re going to select the color-overlay class and set its
dimensions using the width and height properties. Then, with the same class selected (.color-overlay),
we’re going to use the background property and then the linear-gradient property so we
can use rgba values that will add the gradient to the image. Be sure to note the “a”
value in the rgba values sets the opacity of the gradient making the image below show
through. Below the linear-gradient property, we can then add the actual image.
Take a look at the different gradient styles found in the related blog post on xopixel.com.
The link to the blog post is in the description box below.
Also, it’s important to note that the original image is a black and white photo. Using a
black and white photo to apply the gradient overlay will really bring out the effect.
There you have it! You’ve created your own gradient overlays using css3! Give this video
a big thumbs up if you liked it and subscribe to xo pixel for more great videos.
Feel free to share some of your own gradient image overlay creations in the comments below.
Simply take a screenshot or upload a photo and show it off!
We’re going to be inserting the image in our CSS code.The CSS3 is where all the magic
is going to happen. First, we’re going to select the color-overlay class and set its
dimensions using the width and height properties. Then, with the same class selected (.color-overlay),
we’re going to use the background property and then the linear-gradient property so we
can use rgba values that will add the gradient to the image. Be sure to note the “a”
value in the rgba values sets the opacity of the gradient making the image below show
through. Below the linear-gradient property, we can then add the actual image.
Take a look at the different gradient styles found in the related blog post on xopixel.com.
The link to the blog post is in the description box below.
Also, it’s important to note that the original image is a black and white photo. Using a
black and white photo to apply the gradient overlay will really bring out the effect.
There you have it! You’ve created your own gradient overlays using css3! Give this video
a big thumbs up if you liked it and subscribe to xo pixel for more great videos.
Feel free to share some of your own gradient image overlay creations in the comments below.
Simply take a screenshot or upload a photo and show it off!
Comments
Author
Feel free to share some of your own gradient image overlay creations in the comments below. Simply take a screenshot or upload a photo and post in the comments on the blog post here: http://xopixel.com/gradient-image-overlays-with-css3/
Author
Are you on any slack channels? Love your tuts so far
Author
Great tuts series like these kind of diff. tips
Keep up dood
Author
Thank you for help
Author
doesnt work
Author
you know i love you right ? ty
Author
i want to have just half hero image with gradient overlay.. how can i achieve that?
Author
Hi. I am using Ionic 3 and I need help with making sure that my overlay fully encompasses every image variable that I retrieve from my firebase account… My users have uploaded images of different sizes and aspect ratios, so if you can help, I would highly appreciate it.
Author
perfect..