40+ Awesome Image Hover Effects For Gutenberg

This WordPress plugin provides a block for Gutenberg editor that applies 40+ awesome hover effects with custom titles, descriptions, icons, styles on your images.

How to use it:

1. Download and upload the Image Hover Effects Block for Gutenberg plugin.

2. Or directly search and install the plugin from the admin panel.

3. Create a new Image Hover Effects block in the Gutenberg editor.

Image Hover Block New

4. Upload or choose an image from the media library to replace the default image.

Image Hover Block Upload New

5. Insert your own title & description of the image.

title & description of the image

6. Choose a hover effect you’d like to use from the right panel. All possible effects:

  1. Fade
  2. Slide Up
  3. Slide Down
  4. Slide Left
  5. Slide Right
  6. Reveal Up
  7. Reveal Down
  8. Reveal Left
  9. Reveal Right
  10. Push Up
  11. Push Down
  12. Push Left
  13. Push Right
  14. Hinge Up
  15. Hinge Down
  16. Hinge Left
  17. Hinge Right
  18. Flip Horizontal
  19. Flip Vertical
  20. Flip Dialog 1
  21. Flip Dialog 2
  22. Shutter Out Horizontal
  23. Shutter Out Vertical
  24. Shutter Out Dialog 1
  25. Shutter Out Dialog 2
  26. Shutter In Horizontal
  27. Shutter In Vertical
  28. Shutter In Out Horizontal
  29. Shutter In Out Vertical
  30. Shutter In Out Dialog 1
  31. Shutter In Out Dialog 2
  32. Fold Up
  33. Fold Down
  34. Fold Left
  35. Fold Right
  36. Zoom In
  37. Zoom Out
  38. Zoom Out Up
  39. Zoom Out Down
  40. Zoom Out Left
  41. Zoom Out Right
  42. Zoom Out Flip Vertical
  43. Zoom Out Flip Horizontal
  44. Blur

Image Hover Block Choose Effect

7. Customize the size & background overlay and set the link of the image.

size background overlay link

8. Customize the image title.

  • HTML Tag
  • Color
  • Typography

Image Hover Block Title

9. Customize the description.

  • Color
  • Typography

Image Hover Block Description

10. Customize the icon.

  • Icon
  • Position
  • Color
  • Size
  • Space

Image Hover Block Icon

11. Customize the alignment and styles of the hover effect.

  • Horizontal Alignment
  • Vertical Alignment
  • Padding
  • Border Radius

Image Hover Block Styles

12. Publish the post and done.

Preview:

40+ Awesome Image Hover Effects For Gutenberg

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: Blocksera

Homepage: https://wordpress.org/plugins/image-hover-effects-block/

Don’t forget to share this WordPress plugin and also check out other plugins on our site.

Rate This Plugin
Sending
User Review
0 (0 votes)

Leave a Reply