{"id":3204,"date":"2025-08-06T15:57:37","date_gmt":"2025-08-06T15:57:37","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?post_type=docs&#038;p=3204"},"modified":"2025-10-27T02:47:53","modified_gmt":"2025-10-27T02:47:53","password":"","slug":"how-to-use-image-animation-in-flexi-post-grid","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/","title":{"rendered":"How to Use Image Animation in Flexi Post Grid"},"content":{"rendered":"\n<p>Image Animations in Flexi Post Grid allow you to add visual effects to your post thumbnails when users hover over them. These animations enhance user engagement and bring a dynamic feel to your grid layout \u2014 with no coding required.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"297\" height=\"174\" src=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg\" alt=\"\" class=\"wp-image-3207\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"296\" height=\"275\" src=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_14.jpg\" alt=\"\" class=\"wp-image-3208\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Find It<\/h2>\n\n\n\n<p>Inside the <strong>Flexi Post Grid widget panel<\/strong>, scroll to the <strong>Image Animation<\/strong> section. You\u2019ll see two main options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Animation Style<\/strong><\/li>\n\n\n\n<li><strong>Animation Duration (s)<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Image Animation Style Options<\/h2>\n\n\n\n<p>Choose from a list of animation effects:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None<\/strong> \u2013 No animation applied.<\/li>\n\n\n\n<li><strong>Zoom In<\/strong> \u2013 Image zooms in on hover.<\/li>\n\n\n\n<li><strong>Zoom Out<\/strong> \u2013 Image zooms out on hover.<\/li>\n\n\n\n<li><strong>Slide Up<\/strong> \u2013 Image slides up.<\/li>\n\n\n\n<li><strong>Slide Down<\/strong> \u2013 Image slides down.<\/li>\n\n\n\n<li><strong>Slide Left<\/strong> \u2013 Image slides to the left.<\/li>\n\n\n\n<li><strong>Slide Right<\/strong> \u2013 Image slides to the right.<\/li>\n<\/ul>\n\n\n\n<p>Each animation adds movement to your grid images, creating a more interactive experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Animation Duration<\/h2>\n\n\n\n<p>Use the slider to control how fast or slow the animation plays, in seconds. Default is <strong>0.5s<\/strong>. You can increase or decrease the speed as needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag the <strong>Flexi Post Grid widget<\/strong> into your Elementor layout.<\/li>\n\n\n\n<li>Go to the <strong>Image Animation<\/strong> section.<\/li>\n\n\n\n<li>Select an <strong>Animation Style<\/strong> from the dropdown.<\/li>\n\n\n\n<li>Adjust the <strong>Animation Duration<\/strong> with the slider.<\/li>\n\n\n\n<li>Preview the animation in the live editor.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Image Animations in Flexi Post Grid allow you to add visual effects to your post thumbnails when users hover over them. These animations enhance user engagement and bring a dynamic feel to your grid layout \u2014 with no coding required. Where to Find It Inside the Flexi Post Grid widget panel, scroll to the Image Animation section. You\u2019ll see two main options: Image Animation Style Options Choose from a list of animation effects: Each animation adds movement to your grid images, creating a more interactive experience. Animation Duration Use the slider to control how fast or slow the animation plays, in seconds. Default is 0.5s. You can increase or decrease the speed as needed. How to Use<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[28],"doc_tag":[],"class_list":["post-3204","docs","type-docs","status-publish","hentry","doc_category-image-animations"],"year_month":"2026-04","word_count":202,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Elementordipak","author_nicename":"elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/"},"doc_category_info":[{"term_name":"Image Animations","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/image-animations\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Image Animation in Flexi Post Grid - Flexi Post Grid<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Image Animation in Flexi Post Grid - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"Image Animations in Flexi Post Grid allow you to add visual effects to your post thumbnails when users hover over them. These animations enhance user engagement and bring a dynamic feel to your grid layout \u2014 with no coding required. Where to Find It Inside the Flexi Post Grid widget panel, scroll to the Image Animation section. You\u2019ll see two main options: Image Animation Style Options Choose from a list of animation effects: Each animation adds movement to your grid images, creating a more interactive experience. Animation Duration Use the slider to control how fast or slow the animation plays, in seconds. Default is 0.5s. You can increase or decrease the speed as needed. How to Use\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-27T02:47:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"297\" \/>\n\t<meta property=\"og:image:height\" content=\"174\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/\",\"name\":\"How to Use Image Animation in Flexi Post Grid - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg\",\"datePublished\":\"2025-08-06T15:57:37+00:00\",\"dateModified\":\"2025-10-27T02:47:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg\",\"contentUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Image Animation in Flexi Post Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Image Animation in Flexi Post Grid - Flexi Post Grid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Image Animation in Flexi Post Grid - Flexi Post Grid","og_description":"Image Animations in Flexi Post Grid allow you to add visual effects to your post thumbnails when users hover over them. These animations enhance user engagement and bring a dynamic feel to your grid layout \u2014 with no coding required. Where to Find It Inside the Flexi Post Grid widget panel, scroll to the Image Animation section. You\u2019ll see two main options: Image Animation Style Options Choose from a list of animation effects: Each animation adds movement to your grid images, creating a more interactive experience. Animation Duration Use the slider to control how fast or slow the animation plays, in seconds. Default is 0.5s. You can increase or decrease the speed as needed. How to Use","og_url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/","og_site_name":"Flexi Post Grid","article_modified_time":"2025-10-27T02:47:53+00:00","og_image":[{"width":297,"height":174,"url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/","url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/","name":"How to Use Image Animation in Flexi Post Grid - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage"},"image":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg","datePublished":"2025-08-06T15:57:37+00:00","dateModified":"2025-10-27T02:47:53+00:00","breadcrumb":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#primaryimage","url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg","contentUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_13.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-use-image-animation-in-flexi-post-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"How to Use Image Animation in Flexi Post Grid"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=3204"}],"version-history":[{"count":4,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3204\/revisions"}],"predecessor-version":[{"id":4177,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3204\/revisions\/4177"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=3204"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=3204"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=3204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}