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.
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
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.
In the options for each data type, you will find additional settings:
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
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.
Other block settings panel: