Responsive columns when hovered n clickable

Support
#1

I’m trying to implement a responsive effect with my columns but I can’t figure out how to replicate what microsoft has done for these images. microsoft has 3 columns and when a user hovers over one it’ll highlight and underline the text. I created a section with 4 columns. Each column has 1 image, image header, and a short text.

https://www.microsoft.com/en-us/defaultd.aspx

#2

Hi,

You can add a class to your columns then target it using css.

eg. For example add my-column in the class field of your column elements.

Then add this in Custom CSS

    .my-column:hover img {
        opacity:0.8;
   }

    .my-column:hover h6 {
          text-decoration:underline;
    }

You also need to remove the underline style in your headline.

<span style="text-decoration: underline;"><span style="color: #000000;"><strong>Personal Development</strong></span></span>

Hope that helps.

1 Like
#3

Thanks! It’s working

#4

You’re welcome! :slight_smile: