diff --git a/site/content/docs/standard/content-styles/hover-effects/index.html b/site/content/docs/standard/content-styles/hover-effects/index.html
index c1b561af9..1b5aae6fc 100644
--- a/site/content/docs/standard/content-styles/hover-effects/index.html
+++ b/site/content/docs/standard/content-styles/hover-effects/index.html
@@ -81,6 +81,33 @@
       {{< /twsnippet/wrapper >}}
     </div>
   </section>
+
+  <!-- Section: Note about usage with animation  -->
+  <section>
+    <h3 class="mb-3 text-2xl font-semibold leading-normal">
+      Showing the animation effect
+    </h3>
+    <p class="mb-3">
+      As you can see in the above example, you can add any animation to any
+      element on the page by using the following classes:
+    </p>
+    <ul>
+      <li>
+        <code>transition</code>: used to animate the chaged properties on hover,
+      </li>
+
+      <li>
+        <code>duration-x</code>: used to define the duration of the animation
+        where <code>x</code> is the time in milliseconds; e.g.
+        <code>duration-300</code>.
+      </li>
+    </ul>
+    <p>
+      Then, you should be able to add any type of animation by changing the
+      property on hover by using the class:
+      <code>[hover:tw-class-name]</code> e.g. <code>hover:opacity-100</code>.
+    </p>
+  </section>
 </section>
 <!-- Section: Basic example -->