How to create a fade effect with CSS on background with an image on top of it?
I'm trying to replicate the image slider on https://www.masterclass.com/
2 Answers
To create that look you can set the image as the background of a div and then create a "black to clear to black" gradient in the div so it appears on top of the image.
.slideBanner{
background-image: url('../images/Ramsey.jpg');
}
.slideBanner{
background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#020202',GradientType=1 ); /* IE6-9 */
}
I found this gradient code from one of the many gradient generators: http://www.colorzilla.com/gradient-editor/
with these settings:
You can actually chain backgrounds in CSS, separated by a comma. First one is the lowest, second one is on top of that, et. So all you need to do is set the image first and then the gradient.
You can even use blend modes in modern browsers to ensure a nice blending effect on the image.
I'll leave it up to you to generate the required browser prefixes (the generator linked in the other answer is a very good one for that).
.slideBanner{
background: url('https://placeimg.com/500/500/nature') 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
background-blend-mode: multiply;
}
JSfiddle proof: https://jsfiddle.net/synu8xk1/2/
:beforepseudo element to apply the png gradient as a BG image on top of the actual image.