Merge pull request #6660 from vHeemstra/main

[css-images-4] Fixed issue in 3.5.2: "Add a visual example of a color hint being used."

Author: svgeesus

css-images-4/Overview.bs

@@ -1788,7 +1788,23 @@ Coloring the Gradient Line</h4>
 	between the surrounding color stops,
 	with the “halfway color” occurring exactly where the hint specifies.
 
-	Issue: Add a visual example of a color hint being used.
+	<div class=example>
+		Here an example of a linear gradient without [=transition hint=] (top) compared to one with a transition hint between the red and blue [=color stops=] (bottom).
+
+		<img src="images/gradient-colors-transition-hint-comparison.png" alt="">
+
+		Top - Without transition hint (falling back to the default halfway transition hint):
+	
+		<pre class=lang-css>
+			background: linear-gradient(to right, red 0%, blue 100%);
+		</pre>
+
+		Bottom - With transition hint:
+
+		<pre class=lang-css>
+			background: linear-gradient(to right, red 0%, 25%, blue 100%);
+		</pre>
+	</div>
 
 	If multiple <a>color stops</a> have the same position,
 	they produce an infinitesimal transition from the one specified first in the list