Docs

[yhshin1020]

Hey,

I am trying to set up boxes like you see here on this site: https://get.slack.help/hc/en-us

where when you hover over the section a box with a shadow enlarges.

What would be the best way to set this up on my homepage?

Could you provide me with some css for this to work?

Thanks.

[yhshin1020]

This reply has been marked as private.

[Jade]

Hi there,

You can create a row with sections then set a background for every section and a common class name then add this CSS code in the customizer (assuming that the class name you added for the sections is highlight-box):

.highlight-box:hover {
    -webkit-transform: scale(1.045) rotate(0.0001deg);
    -moz-transform: scale(1.045) rotate(0.0001deg);
    -ms-transform: scale(1.045) rotate(0.0001deg);
    -o-transform: scale(1.045) rotate(0.0001deg);
    transform: scale(1.045) rotate(0.0001deg);
    background-color: #FFFFFF !important;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
}

Hope this helps.

[Jade]

Hi there,

You can create a row with sections then set a background for every section and a common class name then add this CSS code in the customizer (assuming that the class name you added for the sections is highlight-box):

.highlight-box:hover {
    -webkit-transform: scale(1.045) rotate(0.0001deg);
    -moz-transform: scale(1.045) rotate(0.0001deg);
    -ms-transform: scale(1.045) rotate(0.0001deg);
    -o-transform: scale(1.045) rotate(0.0001deg);
    transform: scale(1.045) rotate(0.0001deg);
    background-color: #FFFFFF !important;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
}

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[Rupok]

Hi there,

You can set a border-right for one column on the left to get the line. You can create two Rows within a single section. Not sure what you are referring by “Is there a way to make the sections take up a smaller part of the width of the section”. Would you clarify a bit with a screenshot?

Thanks!

[yhshin1020]

This reply has been marked as private.

[Rupok]

Hi there,

Let’s select the Row that contains the two columns and add max-width: 800px; to the style field. Then it will be like this – http://prntscr.com/d261pu

Cheers!

[yhshin1020]

This reply has been marked as private.

[Rupok]

Hi there,

I have suggested you to apply this to the Row but you have applied it to the section instead. You need to place the code for the container/row to get expected result.

Thanks!

[yhshin1020]

This reply has been marked as private.

[Rupok]

Hi there,

If you are using Visual Composer then use this custom CSS :

.home #x-content-band-1 .x-container.wpb_row {
  max-width: 800px;
}

Cheers!

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts