The Hover Options in BlockSpare allow you to add interactive effects to blocks and elements when users move their mouse over them. Hover effects improve user experience by providing visual feedback and making your website feel more dynamic and engaging.
These effects are commonly used for post cards, images, titles, and buttons in layouts such as grids, lists, sliders, and hero banners.
1. Enable Hover Effect #
This option allows you to enable or disable hover effects for the selected block.
- Enabled: The block will show a visual effect when a user hovers over it.
- Disabled: The block will remain static without any hover interaction.
Hover effects help highlight clickable elements such as post cards or featured images.
2. Hover Animation Type #
You can choose different types of hover animations depending on the design style you prefer.
Common hover effects include:
- Zoom In – The image slightly enlarges when hovered.
- Zoom Out – The image scales down slightly.
- Fade Effect – The content fades slightly on hover.
- Lift Up – The block slightly moves upward creating a floating effect.
- Overlay Effect – A colored overlay appears on the image.
These effects are commonly used to emphasize clickable content areas.