Creating Sectional Boxes with Icons and Background Images

Sectional boxes can be one of the most direct navigational elements on your website. They often improve user experience by giving website visitors straightforward options to where your website can take them, and they can be enormously helpful in directing your users precisely where you'd want them to go.

To further differentiate sectional boxes, you can add icons and images personal to your organization. Icons make it easier for users to know where they're going on your website. Custom images can be placed behind those icons to further reflect the goals of each section. Here's how you can create these sectional boxes with custom icons and your brand's background images: 

HTML

The HTML relies nearly exclusively on the default bootstrap grid, making it easy to implement and/or customize:

CSS

Once you've got the basic structure of the boxes together, you can then add the visual elements to make the icon boxes pop and match the rest of your brand. Of particular note is how the "overlay" class is constructed. This is an aboslute positioned element that allows you construct a hover class on the box's background image:

There you have it: a simple line of sectional boxes that can be used to both boost navigation for your users while further aligning your website with your organization's overall brand. Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser window to various sizes to see how the banner would look on mobile display.