Adding a hover effect to an image on a web page is usually a CSS one-liner. Scale it up on hover, blur it, desaturate it — whatever the design calls for. But Odoo’s Website Builder handles hover animations differently, and the updated developer documentation finally explains the mechanism that developers have been reverse-engineering from the source code.
The system supports six distinct hover effects: Overlay, Zoom In, Blur, Grayscale, Sepia, and a combination effect. Applying any of them through code requires a specific class and data attribute on the image element. But here’s the part that surprised developers who expected pure CSS behavior: Odoo processes the image and creates a final SVG file containing both the image and the animation logic, then stores that SVG in the database as an attachment.
Why SVG Instead of CSS
The SVG approach exists because Odoo’s animations can combine transformations with shape overlays and color manipulation that go beyond what CSS transitions handle cleanly across browsers. By baking the animation into an SVG container alongside the image data, the system guarantees consistent rendering regardless of the user’s browser or device capabilities. The tradeoff is that animations aren’t purely declarative CSS — they depend on a processing step.
For developers building custom themes, this means adding theo_animate_on_hover class and settingdata-hover-effectto one of the supported values isn’t enough on its own. The documentation now includes an explicit warning: the animation will only become visible after the effect is re-selected and the page is saved through the Website Builder interface. This processing step generates the SVG attachment that actually renders the animation.
The Code Structure
The implementation uses a combination of HTML attributes that work together. Beyond the base class and effect type, developers can specifydata-shape for overlay geometry anddata-shape-colors for the overlay color palette. The image tag also carries data-filename anddata-format-mimetype attributes that the processor uses when generating the SVG output.
A typical implementation looks like a standard image tag with several data attributes stacked on it. The Website Builder reads these attributes, generates the processed SVG, and replaces the rendered output while keeping the original configuration attributes intact for future editing.
The Practical Implication for Module Developers
If a custom module installs building blocks or snippets that include hover-animated images, those animations won’t appear until someone opens the page in the Website Builder, selects the image, re-applies the effect, and saves. This is a departure from how most frontend functionality works in Odoo, where installing a module and refreshing the page is sufficient. The SVG generation requires the Website Builder’s processing pipeline, which only runs during an active editing session.
For theme developers distributing modules through the Odoo app store, this means either documenting the manual activation step for end users or finding a way to trigger the SVG processing programmatically during module installation. The documentation doesn’t currently describe a server-side generation approach, suggesting that the interactive processing path is the only supported method for now.
Six Effects, One Pipeline
All six animation types — Overlay, Zoom In, Blur, Grayscale, Sepia, and the combination — flow through the same SVG generation pipeline. The difference between them comes down to the data-hover-effectvalue and any associated shape or color configuration. Overlay adds a semi-transparent color layer on hover. Zoom In scales the image within its container. Blur and Grayscale apply their respective CSS-like filters but rendered through SVG filter primitives for consistency. Sepia adds the warm-tone effect.
The approach is architecturally heavier than pure CSS, but it produces animations that survive Odoo’s page rendering pipeline, work inside the drag-and-drop builder, and remain editable without developers needing to touch code after the initial theme setup. The new documentation at least makes the mechanism transparent, even if the manual activation requirement remains an ergonomic rough edge.