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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: