Use CSS Grid to create responsive hero images and banners with CSS and HTML (no JavaScript)
Reminder: I am an occasional developer. If you are a professional developer so if you have improvements or see I am doing something wrong, please share your polite and useful comments with everyone to help me and my viewers.
Please like, comment, and subscribe if you like this video. It helps me create more content!
In this video, I show you how to create a "hero" or "banner" image that includes an image overlayed with a gradient. Above that, I display text and a button (well, actually a link that looks like a button).
Looking online for how to create one for my website was a bit of a nightmare. They all forced you to use absolute positioning, write JavaScript code, or use other convoluted approaches that did not feel natural to me.
Since my website is designed entirely with CSS Grids, I wanted to use that design pattern and could not find any good examples. I spent weeks trying to find a way to create what looks like something very simple. At one point, I came up with the idea of layering grid rectangles over one another using Sarah Edo's CSS Grid Generator to help me with the process. With that approach in hand, it all fell together and hours later I had a working banner!
If you want to watch my experience creating a new site using the Jekyll static site generator, check out my ongoing playlist:
• Git, GitHub, and Visual Studio
To see my site:
https://www.cambermast.com
If you want the code for this video, get the CodePen:
https://codepen.io/BillRaymond/pen/MW...
I created the CSS Grid layout using Sarah Edo's amazing CSS Grid Generator:
https://cssgrid-generator.netlify.app/
I created the gradient, using the CSS gradient generator:
https://cssgradient.io/
For my testing, I used Chrome, Firefox, and whatever version of IE I have and it worked great, including mobile devices.
Once you get the general framework for how this works, which I explain in great detail, you should be able to create your own. I hope this helps!