Hover Box Block

May 26, 2020 Multi User Multi Builder Elements, Multi Theme and Website Builder

Hover Box Block options:

  • Position – set the block position to left, center or right. This option is available at the top block options panel.
  • Max width – you can set a maximum width to your hover box.
  • Min. height – you can set a minumum height to your hover box.
  • Link – you can add a link to your hover box.
  • Open in a new tab/window – choose whether your link is going to be opened in a new window.
  • Class – add a custom CSS class to your hover box.
  • ID – add a custom CSS ID to your hover box.
  • Style – add an inline CSS style to your hover box.

Hover Box Card Block options:

To add individual Hover Box Cards, insert a single Hover Box Card Block for each card you’d like to add. Customize it with the following options:

  • Top padding – you can add top padding to your card using any CSS-compatible padding value.
  • Right padding – you can add right padding to your card using any CSS-compatible padding value.
  • Bottom padding – you can add bottom padding to your card using any CSS-compatible padding value.
  • Left padding – you can add left padding to your card using any CSS-compatible padding value.
  • Text align – align card’s text to left, center or right.
  • Vertical align – choose vertical alignment for your hover box card from top, center and bottom.
  • Text color – set your card’s text color.
  • Border width – set card’s border width in pixels.
  • Border color – set card’s border color.
  • Background color – set the card’s background color.
  • Background hover color – set the card’s background hover color.
  • Background image – add a background image. Use an image from your WordPress Media Library or upload a file from your computer.
  • Parallax effect – you can add a parallax effect to your block.
  • Background size – set the card’s background size. Choose from auto, cover, contain, or add a custom value.
  • Custom background size – set a custom card background size using any CSS-compatible background-size value.
  • Repeat background – you can choose to repeat the background image, to repeat just horizontally or just vertically, or not to repeat at all.
  • Background position – set your background position using one of the available position values.
  • Background gradient – you can set the background colors to gradient.
  • Background gradient color – set the background gradient color of your card.
  • Background color position – set the card’s background color position.
  • Background gradient color position – set the card’s background gradient color position.
  • Background gradient type – set the background gradient type from linear and radial.
  • Background gradient angle – set the background gradient angle using 0-360 degrees. This option is available with the linear gradient type.
  • Background gradient position – set the background gradient position. This option is available with the radial gradient type.
  • Use shadow – enable or disable card’s shadow.
  • Shadow color – set the color of the shadow.
  • Shadow blur – set the blur of the shadow.
  • Horizontal offset – set the horizontal offset of the shadow.
  • Vertical offset – set the vertical offset of the shadow.
  • Class – add a custom CSS class to your card.
  • ID – add a custom CSS ID to your card.
  • Style – add an inline CSS style to your card.

You can add any content or any other block to your Hover Box Card Block.