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 ($27/month).

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

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Thank you! I got this to work at https://scfb.cyberwebzone.com still need to tweak a few items.

    It’s working but I’m confused when you created a class for no-padding

    Then added this CSS:

    .ct-new-columns > .ct-div-block {
    padding: 0;
    }

    How are the two connected?

    In my editor the images still have 25px of margin but on the website they don’t?

    I’m done using the selector inside Oxygen, I’d prefer to write it directly to main.css like you mentioned.

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