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 ($37/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?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: