From 1914d41673b360423a648dd4a704f9b0857a5556 Mon Sep 17 00:00:00 2001
From: ANKUR DWIVEDI <ankurdwivedi@ANKURs-MacBook-Pro-2.local>
Date: Thu, 21 Dec 2023 15:11:53 +0530
Subject: [PATCH] update readme.md

---
 README.md | 104 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index cfda9db..fdf66ba 100644
--- a/README.md
+++ b/README.md
@@ -193,20 +193,80 @@ var imageURL = imagekit.url({
 https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=f-jpg%2Cpr-true%2Ce-sharpen%2Ce-contrast-1
 ```
 
+**3. Adding overlays**
+
+ImageKit.io enables you to apply overlays to [images](https://docs.imagekit.io/features/image-transformations/overlay-using-layers) and [videos](https://docs.imagekit.io/features/video-transformation/overlay) using the raw parameter with the concept of [layers](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#layers). The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.
+
+**Text as overlays**
+
+You can add any text string over a base video or image using a text layer (l-text).
+
+For example:
+
+```js
+var imageURL = imagekit.url({
+    src: "https://ik.imagekit.io/your_imagekit_id/default-image.jpg",
+    transformation: [{
+        "width": 400,
+        "height": 300
+        "raw": "l-text,i-Imagekit,fs-50,l-end"
+    }]
+});
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg
+```
+
+**Image as overlays**
+
+You can add an image over a base video or image using an image layer (l-image).
+
+For example:
+
+```js
+var imageURL = imagekit.url({
+    src: "https://ik.imagekit.io/your_imagekit_id/default-image.jpg",
+    transformation: [{
+        "width": 400,
+        "height": 300
+        "raw": "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end"
+    }]
+});
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg
+```
+
+**Solid color blocks as overlays**
+
+You can add solid color blocks over a base video or image using an image layer (l-image).
+
+For example:
+
+```js
+var imageURL = imagekit.url({
+    src: "https://ik.imagekit.io/your_imagekit_id/img/sample-video.mp4",
+    transformation: [{
+        "width": 400,
+        "height": 300
+        "raw": "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end"
+    }]
+});
+```
+**Sample Result URL**
+```
+https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end/img/sample-video.mp4
+```
+
+
 #### List of supported transformations
 
 See the complete list of transformations supported in ImageKit [here](https://docs.imagekit.io/features/image-transformations). The SDK gives a name to each transformation parameter e.g. `height` for `h` and `width` for `w` parameter. It makes your code more readable. If the property does not match any of the following supported options, it is added as it is.
 
 If you want to generate transformations in your application and add them to the URL as it is, use the `raw` parameter.
 
-<br/>
-
-> #### Deprecation notice
-> The list below mentions the old overlay syntax parameters such as `oi`, `ot`, `obg`, and more. These parameters will be deprecated on 31st Oct 2023 and will start returning errors when used in URLs. Please migrate to the new Layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with [examples](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#examples) to learn quickly.
-> If you create overlay transformations using the JavaScript SDK, you can migrate to the new Layers syntax using the `raw` transformation parameter, as given in the example below.
-> `transformation : [{ "width" : 300, "height" : 300 },{ "raw": "l-image,i-logo.png,w-10,rt-90,l-end" }]`
-<br/>
-
 | Supported Transformation Name | Translates to parameter |
 |-------------------------------|-------------------------|
 | height | h |
@@ -225,34 +285,6 @@ If you want to generate transformations in your application and add them to the
 | rotation | rt |
 | blur | bl |
 | named | n |
-| overlayX | ox |
-| overlayY | oy |
-| overlayFocus | ofo |
-| overlayHeight | oh |
-| overlayWidth | ow |
-| overlayImage | oi |
-| overlayImageTrim | oit |
-| overlayImageAspectRatio | oiar |
-| overlayImageBackground | oibg |
-| overlayImageBorder | oib |
-| overlayImageDPR | oidpr |
-| overlayImageQuality | oiq |
-| overlayImageCropping | oic |
-| overlayImageTrim | oit |
-| overlayText | ot |
-| overlayTextFontSize | ots |
-| overlayTextFontFamily | otf |
-| overlayTextColor | otc |
-| overlayTextTransparency | oa |
-| overlayAlpha | oa |
-| overlayTextTypography | ott |
-| overlayBackground | obg |
-| overlayTextEncoded | ote |
-| overlayTextWidth | otw |
-| overlayTextBackground | otbg |
-| overlayTextPadding | otp |
-| overlayTextInnerAlignment | otia |
-| overlayRadius | or |
 | progressive | pr |
 | lossless | lo |
 | trim | t |