Streaming live at 10am (PST)

Add another Image to column without messing up layout

Hello! I am trying to figure how to add images in my columns that I want to overlay over the current images so that I can set those as the hover state so that the project highlight when hovered over. However, when I add images in, they mess up the current layout which I want to keep as is. I know to make the images relative and layer them on top but it has already messed up the layout.

Help! Thanks!

Here is my site Read-Only:

Sorry, I guess you are trying to get this kind of effect when hover over?

Here’s what you should do:

  1. Change your svg images for icons only (no text)
  2. Put a link block inside your column
  3. Set a border radius, text color and hover effect for background color and text color
  4. Set a transition for background color and text color
  5. Put your image inside the link block
  6. Add a text block inside your link block
  7. Make your link block display flex vertical center center
  8. Copy paste your link block for each button and change the images and text

Pro tip: You should never use image as button. Especially with text inside. Because 1. It’s way more complicated for hover effects and 2. It’s not SEO friendly at all.

I made a quick video for steps 2 to 5 since I can’t upload a new SVG in read-only mode.

I hope this helps! :slight_smile:

That is sooo helpful, thank you SO much!!

1 Like