From daa610616870b0b3d32bd8eb6dd7051741a3c656 Mon Sep 17 00:00:00 2001
From: Brandon Mercier <113701731+bram-odoo@users.noreply.github.com>
Date: Tue, 12 May 2026 08:20:23 +0000
Subject: [PATCH] [IMP] website_themes/howtos: Animation on Hover

This PR adds some explanation about how the hover effect is applied (image conversion to base64, attachment) and warn the reader about the required manual action to make the effect visible.

X-original-commit: 64a45236ed1379557efdab6cea12909f5639688a
---
 .../howtos/website_themes/animations.rst      | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/content/developer/howtos/website_themes/animations.rst b/content/developer/howtos/website_themes/animations.rst
index adbb617b75c..49aa4f3fc33 100644
--- a/content/developer/howtos/website_themes/animations.rst
+++ b/content/developer/howtos/website_themes/animations.rst
@@ -112,7 +112,7 @@ On hover
 This third kind of animations is only related to images and triggered every time we hover on the
 animated image.
 
-We can add 6 animation on hover effects:
+We can choose among 6 animations to apply an hover effect:
 
 - Overlay
 - Zoom In
@@ -123,17 +123,27 @@ We can add 6 animation on hover effects:
 
 **Use**
 
-Enable animations on hover by adding the `o_animate_on_hover` class on your image tag. You can
-also define the type of animation in the `data-hover-effect` attribute.
+Enable animations on hover by adding the `o_animate_on_hover` class on your image tag. Define the
+type of animation in the `data-hover-effect` attribute.
+
+.. note::
+
+   Odoo processes the image and creates a final SVG file containing the image and the animation. By
+   default, it also applies a regular image shape. This final image is then stored in the database
+   as an attachment to keep it editable in the future.
 
 .. code-block:: xml
 
-    <img
-        src="..." alt="..."
-        class="img img-fluid o_we_custom_image o_animate_on_hover"
-        data-hover-effect="overlay"
-        data-hover-effect-color="rgba(0, 0, 0, 0.25)"
-    />
+   <img
+      src="..."
+      alt="..."
+      class="img img-fluid o_we_custom_image o_animate_on_hover"
+      data-hover-effect="overlay"
+      data-hover-effect-color="rgba(0, 0, 0, 0.25)"
+      data-shape="web_editor/geometric/geo_square"
+      data-shape-colors=";;;;"
+      data-filename="my-image.svg"
+      data-format-mimetype="image/webp" />
 
 .. list-table::
    :header-rows: 1
@@ -155,11 +165,25 @@ also define the type of animation in the `data-hover-effect` attribute.
    * - Stroke width
      - `data-hover-stroke-width`
      - Integer (saved as `px`)
+   * - Shape
+     - `data-shape`
+     - Path to the shape
+   * - Colors of the shape
+     - `data-shape-colors`
+     - Hexadecimal code of the colors available (5 max) in the shape (each value, even if empty,
+       is separated by a semicolon and refer to the color palette index used in the shape file)
 
 .. image:: animations/hover.png
    :width: 300
    :alt: Animation on hover options
 
+.. important::
+
+   At this point, you can insert images with animations on hover in a module but the effect won't be
+   applied directly after the module installation. As the Website Builder needs to process the image
+   first (transform it then store it as an attachment), the animation on hover will only be visible
+   after you re-select the effect and save the page with the Website Builder.
+
 .. seealso::
    `Hover effect options
    <https://github.com/odoo/odoo/blob/c272c49657e8b7865bb93e5f1dcc183cc7d44f17/addons/website/views/snippets/snippets.xml#L694>`_