{"id":896,"date":"2026-04-15T06:21:18","date_gmt":"2026-04-15T06:21:18","guid":{"rendered":"https:\/\/easyaccordion.io\/docs\/?post_type=docs&#038;p=896"},"modified":"2026-04-20T08:31:46","modified_gmt":"2026-04-20T08:31:46","slug":"how-to-apply-image-hover-effects-in-accordions","status":"publish","type":"docs","link":"https:\/\/easyaccordion.io\/docs\/key-features-of-faqs-accordions\/how-to-apply-image-hover-effects-in-accordions\/","title":{"rendered":"How to Apply Image Hover Effects in Accordions"},"content":{"rendered":"\n<p>Add interactive animations to your <a href=\"https:\/\/easyaccordion.io\/blocks\/#demoId11\" data-type=\"link\" data-id=\"https:\/\/easyaccordion.io\/blocks\/#demoId11\" target=\"_blank\" rel=\"noreferrer noopener\">image accordions<\/a>, creating a dynamic experience when the user hovers over them. By enabling and adding a layer of dynamic effects, you can showcase images elegantly and increase user engagement in your image-heavy accordion layouts.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ef8d949fa0b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ef8d949fa0b\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1483\" height=\"702\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/easyaccordion.io\/docs\/wp-content\/uploads\/2026\/04\/How-to-Apply-Image-Hover-Effects-in-Accordions.png\" alt=\"How to Apply Image Hover Effects in Accordions\" class=\"wp-image-1112\" srcset=\"https:\/\/easyaccordion.io\/docs\/wp-content\/uploads\/2026\/04\/How-to-Apply-Image-Hover-Effects-in-Accordions.png 1483w, https:\/\/easyaccordion.io\/docs\/wp-content\/uploads\/2026\/04\/How-to-Apply-Image-Hover-Effects-in-Accordions-300x142.png 300w, https:\/\/easyaccordion.io\/docs\/wp-content\/uploads\/2026\/04\/How-to-Apply-Image-Hover-Effects-in-Accordions-1024x485.png 1024w, https:\/\/easyaccordion.io\/docs\/wp-content\/uploads\/2026\/04\/How-to-Apply-Image-Hover-Effects-in-Accordions-768x364.png 768w\" sizes=\"auto, (max-width: 1483px) 100vw, 1483px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To Add Image Hover Effects:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Insert any Accordion Blocks (e.g., &#8220;<strong>Image Accordion<\/strong>&#8220;) block to your page.<\/li>\n\n\n\n<li>Go to the <strong>Image <\/strong>panel, \u201c<strong>Hover Effects<\/strong>\u201d in the block settings.<\/li>\n\n\n\n<li>Select an effect from the list (e.g., Zoom In, Grayscale, or Blur).<\/li>\n\n\n\n<li>Adjust the animation speed for a smooth transition.<\/li>\n<\/ol>\n\n\n\n<p>To know how to configure, please visit the <a href=\"https:\/\/easyaccordion.io\/docs\/image-accordion\/#Image-Lightbox\" data-type=\"link\" data-id=\"https:\/\/easyaccordion.io\/docs\/image-accordion\/#Image-Lightbox\" target=\"_blank\" rel=\"noreferrer noopener\">detailed <\/a>documentation.<\/p>\n\n\n\n<p>Let\u2019s watch the Live Demo of how the <a href=\"https:\/\/easyaccordion.io\/blocks\/#demoId11\" data-type=\"link\" data-id=\"https:\/\/easyaccordion.io\/blocks\/#demoId11\" target=\"_blank\" rel=\"noreferrer noopener\">Image Hover Effects work in Accordions<\/a>.<\/p>\n","protected":false},"parent":882,"menu_order":28,"template":"","docs_cat":[],"class_list":["post-896","docs","type-docs","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":[],"author_info":[],"comment_info":"","_links":{"self":[{"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs\/896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":4,"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs\/896\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs\/896\/revisions\/1116"}],"up":[{"embeddable":true,"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs\/882"}],"wp:attachment":[{"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/media?parent=896"}],"wp:term":[{"taxonomy":"docs_cat","embeddable":true,"href":"https:\/\/easyaccordion.io\/docs\/wp-json\/wp\/v2\/docs_cat?post=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}