Inster Block: Hover Settings

The Inspector panel provides great opportunities for customizing the block. You can hide/show the Inspector panel by clicking on the button with the gear icon, top right. Or using hotkeys ⇧+⌘+, for Mac, and ⇧+⌃+, for Windows and Linux.

Hover type

  • Classic: This Hover as much as possible similar to Instagram hover style.
  • Detailed: Hover with detailed information about the post
  • Disable: Posts will not respond to mouse over

Show hover in editor

This setting displays a hover for one of the posts during editing.

Blend mode

Blend mode for hover overlay layer.

Different blending modes

You can choose from this list:

  • Normal
  • Multiply
  • Screen
  • Overlay
  • Darken
  • Lighten
  • Color-dodge
  • Color-burn
  • Hard light
  • Soft light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

Hover opacity

Hover transparency, from 0 to 100. 0 – fully transparent, 100 – completely non-transparent

Background color

Hover background color. You can choose one of the default colors from Instagram, or set your own color.

Foreground color

Hover text and icon color. You can choose white or black color. Or set your custom color, which will be most suitable for the background color.

Hover content Text Align and Styling

Text align panel

In the detailed hover mode, you can control the alignment of the content ( justify, left, center, right ), as well as its basic styling ( bold, italic ).

Font size

Font size for hover. You can choose from several preset sizes or enter your own font size value in pixels.

important

The font family is controlled by the Theme you are using. To change the font, use the Theme settings or add the custom CSS class for the block.

Hover content

You can display various Post data on hover. In order to show/hide some types of data, enable/disable the check mark. In addition, you can change the sequence of data in the hover. To do this, drag the required element to the desired position.

Drag and Drop post content

In the options for each data type, you will find additional settings:

Hover Options

The checkmark Label hides/shows the word “Label” in the hover.
Checkmark Display 0 hides/shows the number of likes equal to 0

Created Date

By default, the block displays the publication date in the format “the elapsed time since publication”. When you hover on the time elapsed since the publication, the day of publication will be shown relative to UTC.
By default, this date will be shown in the international format DD/MM/YYYY, using the check mark US date format you can change the format to American MM/DD/YYYY

Indent

Inner padding, from content to edge. From 0 to 40px. Available only for Detailed hover

Hover animation

Animation effects for hover. You can choose one from list:

  • None
  • Opacity
  • Scale
  • Rotate clockwise
  • Rotate counter-clockwise
  • Width
  • Height
  • Translate left to right
  • Translate right to left
  • Translate top to bottom
  • Translate bottom to top
  • 3D rotation left to right
  • 3D rotation right to left
  • 3D rotation top to bottom
  • 3D rotation bottom to top

Hover animation timing

Timing function for hover animation. Similar to css animation-timing-function

Animation timing function graph

Hover animation duration

The duration of the animation in seconds. Please do not use too large values, this may worsen the user experience of your site.

Hover animation delay

The duration of the animation in seconds. Recommended value 0.

Hover elevation

Used only for 3D animations. This parameter sets how far from the user the animation axis will be.

Hover perspective

It allows you to add a feeling of depth to a scene, by making elements higher on the z-axis (closer to the viewer) appear larger, and those further away to appear smaller.

Post type icon

Show / hide the post type icon.

Video post icon

Other block settings panel: