Published on Oct 12, 2018

Full-width 4-column image section in Oxygen

Sridhar Katakam

In the members-only tutorial requests forum, a user asked:

I have an idea on how to build these from scratch but wanted to get your feedback. Maybe there’s a quicker way?

On the website https://fb.org1 there are 4 images about 1/2 way down, each with a title, background opacity and hover effect.

In the screencast below I show how we can use Columns element in Oxygen with a Superbox element in each and tweak it with a little bit of custom CSS to have a full-width 4-column section with each column showing a linked image + a title at the bottom.

We will set a translucent dark background so the title text can be seen and add a hover effect for the hyperlink to change the opacity of the image in each box.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right