You are creating the best oxygen content by far. Thanks for moving your head around! Loved the playground stuff at the end particularly as it really got me thinking about possibilities.
Note: When I tried to do this in the ::before I missed a simple detail, so I developed the technique in the ::after. If you do everything I show you in the ::before instead of the ::after and make one additional tweak, you won't need the custom code snippet I show in the video. I updated the blog post with these new notes: digitalambition.co/watch/background-overlay-superpowers-in-oxygen-class-based-custom-overlays/ Thanks to Max Gottschalk for pointing out this detail! He made it less cool, but much more efficient. :) :) :)
I solved the issue. I ended up following your instructions in the ::before instead of the ::after, then making the section's original & ::before z-index to -1.
@@c.s.christopher5801 I solved the issue. I ended up following the instructions in the ::before instead of the ::after, then making the section's original & ::before z-index to -1.
Kevin, I love and heavily use Oxygen. I discovered your channel about one week ago and very quickly became a FAN. Thank you for amazing content that is just right (at least for me) in terms of level, speed and presentation tone... keep them coming please.
Thank you so much Kevin! - definitely one of the best, well structured oxygen tutorials at the moment! Future Tutorial proposals: 1. Create and tweak menus/headers with and without native oxygen menu/pro menu elements alternatives: custom build, core, oxyextras - especially some different options/best practices for the mobile menu variants (Full screen, off canvas, modal, slide in nav levels type, sticky ..) 2. Best way to handle tables in oxygen (divs, tablepress, wpDataTables,... Responsive - with responsive I mean with simple nicely styled horizontal scrollbar under the table, which is the best responsive option regarding tables usability in my opinion..) Greetings, Stefan
You are seriously useful, love your content. I have a request :) Would you be able to make a tutorial on how to apply a Ken Burns effect to a background image only? It seems like any css that you apply to create the effect, affects all elements in a section/div...wherever the image is. I suspect we need to use the before state to target the background image but I can't get it to work. So looking for a super-hero! Thanks
@@Gearyco I arrived here in 1997 to Eglin AfB and retired in 2000. Never left. The area beaches are stupendous. Although I also lived in Hawaii for three years and beaches were als spectacular
Another great vid. Based on this and the updated method on your blog, I was messing around with combining the technique with your image card tutorial, so if you create an image class with the object-fit:cover, position:absolute, width/height:100%, and z-index:-2 then you can replace the background image with a regular image and have srcset and alt tags available. Very cool. Thanks!
Very cool. My previous workaround was to add a position absolute div with associated overlay-- classes, but I like this better. Thanks for another awesome tutorial!
Kevin, what are your must-have plugins that you use on pretty much every site you build? I already have my favorites that work well with Divi which I expect many will work with Oxygen. I can already tell you’re a fan of OxyNinja. I plan on purchasing a license soon. Any other Oxygen specific plugins? I found I had outgrown Divi in a lot of respects. I kept using more and more custom code and started using some classes. It was becoming a mess! I like that Oxygen helps you to organize your custom code. Creating a site blueprint is what I desire. Your videos are EXACTLY what I’ve been looking for. They aren’t overly technical. Yet they are pretty advanced.
Thank you Kevin for taking the time. This was an amazing time saving tutorial. Much appreciated. What is you take on parallax and Lottie animations? Have any tutorials with the magic Kevin's Sauce coming soon? 😜💪
This content is the bomb! Thanks so much. Question, what is the difference between this technique and creating an overlay template with the featured image as the hero image?
You can definitely use this technique inside a page template on a featured image. But I would still create the class because these overlays aren't just used on hero sections. They are versatile to be used on many different sections and multiple sections on a page in some cases depending on the design. Building them into utility classes offers maximum speed and flexibility.
Thanks again. In order to control all this via CSS I added the following code to yours, this way as soon as I add a new element like --color2 I only need to style that via .overlay--color:after and can avoid playing around in Oxygen - or did I miss something with that approach ;) .ct-section[class*="overlay--"] .ct-section-inner-wrap { position: relative; z-index: 1; } [class*="overlay--"]:after { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ""; } .overlay--gradient:after { background-image: linear-gradient(rgba(170,46,46,0.55),rgba(67,83,255,0.41)); } .overlay--color:after { background-color: rgba(67,83,255,0.15); }
Another superb tutorial, that for teaching us these great things. Out of interest, what advice would you give if I wanted to use this entire class only to work on the hover state?
Super video once again Kevin - I’m currently trying to combine all your tips into my blueprint site that I also use oxy ninja on - would love to see any tips you have about using your default 02 setup, owl spacing etc
@@Gearyco 🤩OMG would love this!!! Also, if you ever need any BETA members for soft launching any training you are ever thinking of putting out there - I'm officially throwing my hat in the ring...... 😉
Thanks for the great tutorial! Can't wait to use the [class*="overlay--"] - just curious what makes ::after==$0 in the html the top layer by default? If it's just that its order comes after ct-section-inner-wrap in the html, couldn't we just use ::before==$0 to avoid that issue?
Hey, is it possible to apply duotone effects using this technique? I watched another tutorial and the guy put the darker color on the background and the lighter color on before, and the image in a div, so the heading layer didnt really work...
Is any differences if we do it with > *? like this: .ct-section[class*="overlay--"] > * I am trying to apply this technique on a div instead of a section by using .ct-div-block[class*="overlay--"] > * Curious any bad side-effect may occurs? Thanks for the tutorial btw
You don't need the code for this technique. See the updated instructions. But no, your code snippet will select and apply styling to all direct children of any element that has that class convention. ">" means "look for direct children" and "*" means "select all."
As for the "new instructions" on your website, shouldn't the first step of "Step #2: Style the ::before pseudo element of that overlay class." be "1. From the "state" dropdown of your overlay class, choose ":before." instead of "1. From the "state" dropdown of your overlay class, choose ":after." ?
It's not true what you say. You can easily add a gradient overlay to a class, and it works as expected. What you are doing is overwriting this effect by assigning a background image to the element ID. And as we know ID properties have a higher priority than class styles. But the gradient overlay on classes absolutely work as long as you don't overwrite them on top.
That's the whole point of this video. What I meant is ... you can't assign a gradient overlay to a section that has a background image in it via a class. It's a background image overlay tutorial, not an "add a gradient to a section" tutorial.
@@Gearyco yes you can. That's my point. You're teaching wrong facts, and make false statements. If you put the background image on the class instead of the ID then you can add a gradient overlay to this background image. I know this doesn't make much sense if you want to add that class to different sections, but that's the way it works intentionally. I totally understand the purpose of your video, but you should stick to true facts, especially when you try to tutor people, because I'm sure many are receiving the wrong message.
@@ABMEX if you put the background image on the class, all your hero sections are forced to use the same background image. That doesn’t solve the problem we are solving here. The point of the tutorial is very clear - people want overlay styles assigned to classes so they can quickly apply them across hero sections that have different background images. That's the most important use case. The other use cases you mentioned are severely limited and it's likely obvious to people how to do them, so no tutorial is needed. I don't want to teach people how to do things that have severe limitations.
You are creating the best oxygen content by far. Thanks for moving your head around! Loved the playground stuff at the end particularly as it really got me thinking about possibilities.
Much love!
Thank you for showing these great possibilities! I did not know about the .ct-section[class*="overlay--"] technique. Great one!
Note: When I tried to do this in the ::before I missed a simple detail, so I developed the technique in the ::after. If you do everything I show you in the ::before instead of the ::after and make one additional tweak, you won't need the custom code snippet I show in the video. I updated the blog post with these new notes: digitalambition.co/watch/background-overlay-superpowers-in-oxygen-class-based-custom-overlays/
Thanks to Max Gottschalk for pointing out this detail! He made it less cool, but much more efficient. :) :) :)
Link doesn't lead anywhere.
The link is down. I found the video through your site's "Videos" section, but was unable to find any blog/text to go with it.
I solved the issue. I ended up following your instructions in the ::before instead of the ::after, then making the section's original & ::before z-index to -1.
@@c.s.christopher5801 I solved the issue. I ended up following the instructions in the ::before instead of the ::after, then making the section's original & ::before z-index to -1.
Kevin, I love and heavily use Oxygen. I discovered your channel about one week ago and very quickly became a FAN. Thank you for amazing content that is just right (at least for me) in terms of level, speed and presentation tone... keep them coming please.
Glad to hear it! More on the way :)
Thank you so much Kevin! - definitely one of the best, well structured oxygen tutorials at the moment!
Future Tutorial proposals:
1. Create and tweak menus/headers with and without native oxygen menu/pro menu elements alternatives: custom build, core, oxyextras - especially some different options/best practices for the mobile menu variants (Full screen, off canvas, modal, slide in nav levels type, sticky ..)
2. Best way to handle tables in oxygen (divs, tablepress, wpDataTables,... Responsive - with responsive I mean with simple nicely styled horizontal scrollbar under the table, which is the best responsive option regarding tables usability in my opinion..)
Greetings, Stefan
Great ideas. I'll add them to the list!
Another great video Kevin. You ever come to the UK beers are on me!!
I'd love to see the UK!
You are seriously useful, love your content. I have a request :) Would you be able to make a tutorial on how to apply a Ken Burns effect to a background image only? It seems like any css that you apply to create the effect, affects all elements in a section/div...wherever the image is. I suspect we need to use the before state to target the background image but I can't get it to work. So looking for a super-hero! Thanks
Hey oh, i am watching from Denmark. Just started using oxygen, so this is pure gold. Thank you 🙏
I am learning oxygen slowly. But I have learned so much more from this series. Never have learned css but am understanding. Thank you!
Btw here in Florida Panhadle
We are about to be in Destin!
@@Gearyco I live in Niceville. 5 miles from Destin. Welcome to the Emerald Coast
@@morozara4962 We got married in Destin and try to go every year. It’s our favorite!
@@Gearyco I arrived here in 1997 to Eglin AfB and retired in 2000. Never left. The area beaches are stupendous. Although I also lived in Hawaii for three years and beaches were als spectacular
Wow... thanks for this tutorial. Just did that for overlay header (the oxygen way does not work).
Kevin again nice tutorial. Thanks for all that amazing stuff!
GREAT GREAT video as always, thank you Kevin.
Another great vid. Based on this and the updated method on your blog, I was messing around with combining the technique with your image card tutorial, so if you create an image class with the object-fit:cover, position:absolute, width/height:100%, and z-index:-2 then you can replace the background image with a regular image and have srcset and alt tags available. Very cool. Thanks!
Yes!
Very cool. My previous workaround was to add a position absolute div with associated overlay-- classes, but I like this better. Thanks for another awesome tutorial!
Thank Kevin.. keep it up !! loving your tuts
Amazing videos, Kevin. Thanks so much for taking the time to make them. Am literally going through your archive pulling out diamonds!
💪🏻
Awesome. I am addicted to your tutorials. 😆😆😆
Better tuts here than I paid for.
That’s the goal :)
Great thank you from Germany
You are welcome!
Didn't expect that one to be that awesome. Thanks from Barcelona! 💙
Dude your content is pure gold. Keep it coming.
this is awsome thanks for sharing your knowledge
Kevin, what are your must-have plugins that you use on pretty much every site you build? I already have my favorites that work well with Divi which I expect many will work with Oxygen. I can already tell you’re a fan of OxyNinja. I plan on purchasing a license soon. Any other Oxygen specific plugins?
I found I had outgrown Divi in a lot of respects. I kept using more and more custom code and started using some classes. It was becoming a mess! I like that Oxygen helps you to organize your custom code. Creating a site blueprint is what I desire. Your videos are EXACTLY what I’ve been looking for. They aren’t overly technical. Yet they are pretty advanced.
I used divi back in the day as well. I’ll do a video on our core recommended plugins.
Thank you Kevin for taking the time. This was an amazing time saving tutorial. Much appreciated. What is you take on parallax and Lottie animations? Have any tutorials with the magic Kevin's Sauce coming soon? 😜💪
I don’t use lottie and use parallax rarely.
Watching from Bulgaria
Thank you very much, you provide very valuable content
Another awesome tutorial ! Thank you so much Kevin !
This content is the bomb! Thanks so much. Question, what is the difference between this technique and creating an overlay template with the featured image as the hero image?
You can definitely use this technique inside a page template on a featured image. But I would still create the class because these overlays aren't just used on hero sections. They are versatile to be used on many different sections and multiple sections on a page in some cases depending on the design. Building them into utility classes offers maximum speed and flexibility.
Couldn't catch the premier but, as usual, this tuts are great!
Thanks again. In order to control all this via CSS I added the following code to yours, this way as soon as I add a new element like --color2 I only need to style that via .overlay--color:after and can avoid playing around in Oxygen - or did I miss something with that approach ;)
.ct-section[class*="overlay--"] .ct-section-inner-wrap {
position: relative;
z-index: 1;
}
[class*="overlay--"]:after {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
content: "";
}
.overlay--gradient:after {
background-image: linear-gradient(rgba(170,46,46,0.55),rgba(67,83,255,0.41));
}
.overlay--color:after {
background-color: rgba(67,83,255,0.15);
}
Make sure you see my updated instructions and notes. Read the blog post.
@@Gearyco i did ;) but preferred a way to set everything without messing in the builder. All I need now is a class and am good to go. Or not?
Another great tutorial. Thanks from Portugal
You are welcome!
Another superb tutorial, that for teaching us these great things.
Out of interest, what advice would you give if I wanted to use this entire class only to work on the hover state?
Just a simple tweak. I might can do a video on it.
@@Gearyco Thank you.
So cool...Big Thanks
Super video once again Kevin - I’m currently trying to combine all your tips into my blueprint site that I also use oxy ninja on - would love to see any tips you have about using your default 02 setup, owl spacing etc
I'm planning on doing a longer OxyNinja video and will include changes I make to the default OxyNinja setup!
@@Gearyco 🤩OMG would love this!!! Also, if you ever need any BETA members for soft launching any training you are ever thinking of putting out there - I'm officially throwing my hat in the ring...... 😉
Do you consider to make a full tutorial of making full website with oxygen builder? Cz i'm very excited 🤩
Yes, I plan to.
Super awesome alright!
Thanks! This was awesome
great tutorial again, thanks!
Thanks for the great tutorial! Can't wait to use the [class*="overlay--"] - just curious what makes ::after==$0 in the html the top layer by default? If it's just that its order comes after ct-section-inner-wrap in the html, couldn't we just use ::before==$0 to avoid that issue?
Yes, see the updated notes.
Thanks, you made my day.
Glad I could help!
Amazing content
Nice!
What screen recording software did you go with?
Loom Business
Watching from Cambodia
Amazing, thank you :)
You are the best!
Trying my best ... sometimes I make mistakes, though. Like on this tutorial. But still good educational content and a great outcome :)
Hey, is it possible to apply duotone effects using this technique? I watched another tutorial and the guy put the darker color on the background and the lighter color on before, and the image in a div, so the heading layer didnt really work...
Can you link to an example?
Is any differences if we do it with > *?
like this:
.ct-section[class*="overlay--"] > *
I am trying to apply this technique on a div instead of a section by using
.ct-div-block[class*="overlay--"] > *
Curious any bad side-effect may occurs?
Thanks for the tutorial btw
You don't need the code for this technique. See the updated instructions. But no, your code snippet will select and apply styling to all direct children of any element that has that class convention. ">" means "look for direct children" and "*" means "select all."
Alright I’ve read it. That is brilliant. Thanks for the updated one.👍👍
As for the "new instructions" on your website, shouldn't the first step of "Step #2: Style the ::before pseudo element of that overlay class." be "1. From the "state" dropdown of your overlay class, choose ":before." instead of "1. From the "state" dropdown of your overlay class, choose ":after." ?
Yep, copied the first set to edit and forgot that part. Fixed now, thanks!
F***ing awesome 👍
Is there any way we can srcset background images in Oxygen?
Not out of the box, unfortunately.
Poderia ativar as legendas, por favor? (Could you activate subtitles, please?)
Not sure how :/
@@Gearyco ahh, ok. thanks for responding. I love your videos, but since I don’t know English, I follow them by the subtitles
Instant like!
you spoil us :-)
I try
Or can we just ask the oxygen team to make it work without the workaround?
It does. Check the comments
It's not true what you say. You can easily add a gradient overlay to a class, and it works as expected. What you are doing is overwriting this effect by assigning a background image to the element ID. And as we know ID properties have a higher priority than class styles. But the gradient overlay on classes absolutely work as long as you don't overwrite them on top.
That's the whole point of this video. What I meant is ... you can't assign a gradient overlay to a section that has a background image in it via a class. It's a background image overlay tutorial, not an "add a gradient to a section" tutorial.
@@Gearyco yes you can. That's my point. You're teaching wrong facts, and make false statements. If you put the background image on the class instead of the ID then you can add a gradient overlay to this background image. I know this doesn't make much sense if you want to add that class to different sections, but that's the way it works intentionally. I totally understand the purpose of your video, but you should stick to true facts, especially when you try to tutor people, because I'm sure many are receiving the wrong message.
@@ABMEX if you put the background image on the class, all your hero sections are forced to use the same background image. That doesn’t solve the problem we are solving here. The point of the tutorial is very clear - people want overlay styles assigned to classes so they can quickly apply them across hero sections that have different background images. That's the most important use case. The other use cases you mentioned are severely limited and it's likely obvious to people how to do them, so no tutorial is needed. I don't want to teach people how to do things that have severe limitations.