Placing layers on images

Cloudinary allows you to dynamically add layers to specific locations within your images, where the new layers are added over the base image as overlays, and can also be easily transformed to suit your needs. There are multiple options for adding a new layer to a base image, either an image uploaded to your account, a remote image, or a text string.

Image layers can also be added as underlays instead, and there are special layer applications for using layers in combination with other Cloudinary transformations.

Here are examples of some popular use cases that you can accomplish using layers (combined with other transformations). Click each image to see the URL parameters applied in each case:

Brand or watermark
your images Hide all
detected faces Add personalized
text Displace images
on products

Layer transformation syntax

In its most simple form, adding a layer over the base image takes following URL syntax:

l_<public id of overlay>/fl_layer_apply

The layer parameter is in its own URL component and starts the overlay definition (similar to an open bracket). The layer_apply flag is in a separate component that closes the definition (similar to a closing bracket) and instructs Cloudinary to place it.

You can enhance your layer both by controlling where and how it is placed on the base image using gravity, offset and other placement qualifiers, and by applying transformations to the layered asset, using the following general URL syntax.

l_<public_id of layer>/<optional layer transformations>/fl_layer_apply,<optional placement qualifiers>

Image overlays

The default overlay type is an image. For example, adding an overlay of the image called cloudinary_icon_blue to a base image (l_cloudinary_icon_blue/fl_layer_apply):

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>"layer_apply"}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")));

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>"layer_apply")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'flags': "layer_apply"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {flags: "layer_apply"}
  ]})

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);

cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);

<Image publicId="sample.jpg" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags="layer_apply" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags="layer_apply" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).generate("sample.jpg");

cloudinary.image {
  publicId("sample.jpg")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue"))) 
}.generate()

Remote image overlays

Use a remote image (an image not stored in your Cloudinary account) as an overlay by adding the fetch (or url for some SDKs) property of the layer parameter ( l_fetch: in URLs) and the base64 encoded URL of the remote image. The general URL syntax for adding a remote image as an overlay takes the following form:

l_fetch:<URL of overlay>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

For example, adding an overlay of the remote image https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png to the base image.

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:url=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {:flags=>"layer_apply"}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::fetch("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")));

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("url"=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")),
  array("flags"=>"layer_apply")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'url': "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {'flags': "layer_apply"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: {url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {flags: "layer_apply"}
  ]})

cloudinary.url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

<Image publicId="sample.jpg" >
  <Transformation overlay={{url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}} />
  <Transformation flags="layer_apply" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{url: 'https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png'}" />
  <cld-transformation flags="layer_apply" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new FetchLayer("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).generate("sample.jpg");

// This code example is not currently available.

Text overlays

Add a text overlay over the base image with the text property of the layer parameter ( l_text: in URLs). The parameter also requires specifying font family and size (separated with an underscore and followed by a colon), and the text string to display. The general URL syntax for adding a text layer takes the following form:

l_text:<text styling options>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

In addition to the required font and size styling values, you can optionally specify a variety of other CSS-like styling parameters and to further customize your text layers by specifying text color, adding line breaks, emojis and other special characters, and other text layer options.

Cloudinary first generates an image from the text definition and then overlays it like any other image overlay, and thus supports all the same transformations that any image overlay supports.

For example, to overlay the text string "Flowers" in the Arial font with a size of 80 pixels (l_text:Arial_80:Flowers/fl_layer_apply):

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:font_family=>"Arial", :font_size=>80, :text=>"Flowers"}},
  {:flags=>"layer_apply"}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::text("Flowers",(new TextStyle("Arial",80)))));

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>80, "text"=>"Flowers")),
  array("flags"=>"layer_apply")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'font_family': "Arial", 'font_size': 80, 'text': "Flowers"}},
  {'flags': "layer_apply"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: {font_family: "Arial", font_size: 80, text: "Flowers"}},
  {flags: "layer_apply"}
  ]})

cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

<Image publicId="sample.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 80, text: "Flowers"}} />
  <Transformation flags="layer_apply" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 80, text: 'Flowers'}" />
  <cld-transformation flags="layer_apply" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:Arial_80:Flowers">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(80).Text("Flowers")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Arial_80:Flowers").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).generate("sample.jpg");

// This code example is not currently available.

Layer placement

The fl_layer_apply component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base image, and any details regarding the relationship between the overlay element and the base image.

Positioning layers with gravity

To determine the position of the new layer, you can add the gravity parameter to define the location to place the layer within the base image ('center' by default). The gravity parameter is added in the same component as the layer_apply flag.

For example, to add an overlay of the image called cloudinary_icon_white to the base image with gravity set to west (l_cloudinary_icon_white/fl_layer_apply,g_west):

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"layer_apply", :gravity=>"west"}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white"))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::west()))
  )
  );

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"layer_apply", "gravity"=>"west")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "cloudinary_icon_white"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: "cloudinary_icon_white"},
  {flags: "layer_apply", gravity: "west"}
  ]})

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

<Image publicId="sample.jpg" >
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="layer_apply" gravity="west" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="layer_apply" gravity="west" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("layer_apply").Gravity("west")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("layer_apply").setGravity("west")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).generate("sample.jpg");

cloudinary.image {
  publicId("sample.jpg")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_white")) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.west()))
   })
   }) 
}.generate()

To fine tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the x and y coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing image (e.g., 0.2 for an offset of 20%).

For example, to place a text overlay at a vertical distance of 5% from the bottom of the image (l_text:Times_100:Welcome/fl_layer_apply,g_south,y_0.05):

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:font_family=>"Times", :font_size=>100, :text=>"Welcome"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>0.05}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::text("Welcome",(new TextStyle("Times",100))))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(0.05))
  );

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Times", "font_size"=>100, "text"=>"Welcome")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>"0.05")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'font_family': "Times", 'font_size': 100, 'text': "Welcome"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': "0.05"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: {font_family: "Times", font_size: 100, text: "Welcome"}},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})

cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

<Image publicId="sample.jpg" >
  <Transformation overlay={{fontFamily: "Times", fontSize: 100, text: "Welcome"}} />
  <Transformation flags="layer_apply" gravity="south" y="0.05" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{fontFamily: 'Times', fontSize: 100, text: 'Welcome'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="0.05" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:Times_100:Welcome">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="0.05">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Times").FontSize(100).Text("Welcome")).Chain()
  .Flags("layer_apply").Gravity("south").Y(0.05)).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Times_100:Welcome").chain()
  .setFlags("layer_apply").setGravity("south").setY(0.05)).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).generate("sample.jpg");

// This code example is not currently available.

Overlays on special positions

The gravity parameter can also be set to a custom region within an image, which becomes the focus when placing the overlay. These 'special positions' are locations within the image that are either automatically detected by Cloudinary (e.g., a face), custom coordinates that were previously specified (e.g., as part of the image upload method), or detected by one of the Cloudinary add-ons (e.g., eyes or text within the image).

For a full list of all the special positions available to use for placing overlays with the gravity parameter, see the <special position> section in the transformation reference guide.

For example:

1. Add an overlay of the golden_star image over all faces detected in the couple image:

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   url:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/l_golden_star/c_scale,w_50/fl_layer_apply,g_faces/couple.jpg

   Ruby (cloudinary 1.x):

   Copy to clipboard

   cl_image_tag("couple.jpg", :transformation=>[
     {:overlay=>"golden_star"},
     {:width=>50, :crop=>"scale"},
     {:flags=>"layer_apply", :gravity=>"faces"}
     ])

   PHP (cloudinary_php 2.x):

   Copy to clipboard

   (new ImageTag('couple.jpg'))
     ->overlay(Overlay::source(
     Source::image("golden_star")
     ->transformation((new Transformation())
     ->resize(Resize::scale()->width(50)))
     )
     ->position((new Position())
     ->gravity(
     Gravity::focusOn(
     FocusOn::faces()))
     )
     );

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

   Copy to clipboard

   cl_image_tag("couple.jpg", array("transformation"=>array(
     array("overlay"=>"golden_star"),
     array("width"=>50, "crop"=>"scale"),
     array("flags"=>"layer_apply", "gravity"=>"faces")
     )))

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   Copy to clipboard

   CloudinaryImage("couple.jpg").image(transformation=[
     {'overlay': "golden_star"},
     {'width': 50, 'crop': "scale"},
     {'flags': "layer_apply", 'gravity': "faces"}
     ])

   Node.js (cloudinary 1.x):

   Copy to clipboard

   cloudinary.image("couple.jpg", {transformation: [
     {overlay: "golden_star"},
     {width: 50, crop: "scale"},
     {flags: "layer_apply", gravity: "faces"}
     ]})

   Java (cloudinary 1.x):

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .overlay(new Layer().publicId("golden_star")).chain()
     .width(50).crop("scale").chain()
     .flags("layer_apply").gravity("faces")).imageTag("couple.jpg");

   JS (@cloudinary/url-gen 1.x):

   Copy to clipboard

   new CloudinaryImage("couple.jpg").overlay(
     source(
       image("golden_star").transformation(
         new Transformation().resize(scale().width(50))
       )
     ).position(new Position().gravity(focusOn(faces())))
   );

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

   Copy to clipboard

   cloudinary.imageTag('couple.jpg', {transformation: [
     {overlay: new cloudinary.Layer().publicId("golden_star")},
     {width: 50, crop: "scale"},
     {flags: "layer_apply", gravity: "faces"}
     ]}).toHtml();

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   Copy to clipboard

   $.cloudinary.image("couple.jpg", {transformation: [
     {overlay: new cloudinary.Layer().publicId("golden_star")},
     {width: 50, crop: "scale"},
     {flags: "layer_apply", gravity: "faces"}
     ]})

   React (@cloudinary/react 1.x):

   Copy to clipboard

   //React SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("couple.jpg").overlay(
     source(
       image("golden_star").transformation(
         new Transformation().resize(scale().width(50))
       )
     ).position(new Position().gravity(focusOn(faces())))
   );

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   Copy to clipboard

   <Image publicId="couple.jpg" >
     <Transformation overlay="golden_star" />
     <Transformation width="50" crop="scale" />
     <Transformation flags="layer_apply" gravity="faces" />
   </Image>

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

   <cld-image public-id="couple.jpg" >
     <cld-transformation :overlay="golden_star" />
     <cld-transformation width="50" crop="scale" />
     <cld-transformation flags="layer_apply" gravity="faces" />
   </cld-image>

   Angular (@cloudinary/ng 1.x):

   Copy to clipboard

   //Angular SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("couple.jpg").overlay(
     source(
       image("golden_star").transformation(
         new Transformation().resize(scale().width(50))
       )
     ).position(new Position().gravity(focusOn(faces())))
   );

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   Copy to clipboard

   <cl-image public-id="couple.jpg" >
     <cl-transformation overlay="golden_star">
     </cl-transformation>
     <cl-transformation width="50" crop="scale">
     </cl-transformation>
     <cl-transformation flags="layer_apply" gravity="faces">
     </cl-transformation>
   </cl-image>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .Overlay(new Layer().PublicId("golden_star")).Chain()
     .Width(50).Crop("scale").Chain()
     .Flags("layer_apply").Gravity("faces")).BuildImageTag("couple.jpg")

   iOS (cloudinary 3.x):

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setOverlay("golden_star").chain()
     .setWidth(50).setCrop("scale").chain()
     .setFlags("layer_apply").setGravity("faces")).generate("couple.jpg")!, cloudinary: cloudinary)

   Android (cloudinary-android 1.x):

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .overlay(new Layer().publicId("golden_star")).chain()
     .width(50).crop("scale").chain()
     .flags("layer_apply").gravity("faces")).generate("couple.jpg");

   Kotlin (kotlin-url-gen 1.x):

   Copy to clipboard

   cloudinary.image {
     publicId("couple.jpg")
      overlay(Overlay.source(
     Source.image("golden_star") {
      transformation(Transformation {
      resize(Resize.scale() { width(50) }) })
      }) {
      position(Position() {
      gravity(
     Gravity.focusOn(
     FocusOn.faces()))
      })
      }) 
   }.generate()

   

2. Use the OCR Text Detection and Extraction add-on to add an overlay with your site's contact information that covers any detected text in an uploaded image:

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   url:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/l_call_text/c_scale,fl_region_relative,w_1.1/fl_layer_apply,g_ocr_text/sale_sign.jpg

   Ruby (cloudinary 1.x):

   Copy to clipboard

   cl_image_tag("sale_sign.jpg", :transformation=>[
     {:overlay=>"call_text"},
     {:flags=>"region_relative", :width=>1.1, :crop=>"scale"},
     {:flags=>"layer_apply", :gravity=>"ocr_text"}
     ])

   PHP (cloudinary_php 2.x):

   Copy to clipboard

   (new ImageTag('sale_sign.jpg'))
     ->overlay(Overlay::source(
     Source::image("call_text")
     ->transformation((new Transformation())
     ->resize(Resize::scale()->width(1.1)
     ->regionRelative()
     ))
     )
     ->position((new Position())
     ->gravity(
     Gravity::focusOn(
     FocusOn::ocr()))
     )
     );

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

   Copy to clipboard

   cl_image_tag("sale_sign.jpg", array("transformation"=>array(
     array("overlay"=>"call_text"),
     array("flags"=>"region_relative", "width"=>"1.1", "crop"=>"scale"),
     array("flags"=>"layer_apply", "gravity"=>"ocr_text")
     )))

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   Copy to clipboard

   CloudinaryImage("sale_sign.jpg").image(transformation=[
     {'overlay': "call_text"},
     {'flags': "region_relative", 'width': "1.1", 'crop': "scale"},
     {'flags': "layer_apply", 'gravity': "ocr_text"}
     ])

   Node.js (cloudinary 1.x):

   Copy to clipboard

   cloudinary.image("sale_sign.jpg", {transformation: [
     {overlay: "call_text"},
     {flags: "region_relative", width: "1.1", crop: "scale"},
     {flags: "layer_apply", gravity: "ocr_text"}
     ]})

   Java (cloudinary 1.x):

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .overlay(new Layer().publicId("call_text")).chain()
     .flags("region_relative").width(1.1).crop("scale").chain()
     .flags("layer_apply").gravity("ocr_text")).imageTag("sale_sign.jpg");

   JS (@cloudinary/url-gen 1.x):

   Copy to clipboard

   new CloudinaryImage("sale_sign.jpg").overlay(
     source(
       image("call_text").transformation(
         new Transformation().resize(scale().width(1.1).regionRelative())
       )
     ).position(new Position().gravity(focusOn(ocr())))
   );

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

   Copy to clipboard

   cloudinary.imageTag('sale_sign.jpg', {transformation: [
     {overlay: new cloudinary.Layer().publicId("call_text")},
     {flags: "region_relative", width: "1.1", crop: "scale"},
     {flags: "layer_apply", gravity: "ocr_text"}
     ]}).toHtml();

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   Copy to clipboard

   $.cloudinary.image("sale_sign.jpg", {transformation: [
     {overlay: new cloudinary.Layer().publicId("call_text")},
     {flags: "region_relative", width: "1.1", crop: "scale"},
     {flags: "layer_apply", gravity: "ocr_text"}
     ]})

   React (@cloudinary/react 1.x):

   Copy to clipboard

   //React SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sale_sign.jpg").overlay(
     source(
       image("call_text").transformation(
         new Transformation().resize(scale().width(1.1).regionRelative())
       )
     ).position(new Position().gravity(focusOn(ocr())))
   );

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   Copy to clipboard

   <Image publicId="sale_sign.jpg" >
     <Transformation overlay="call_text" />
     <Transformation flags="region_relative" width="1.1" crop="scale" />
     <Transformation flags="layer_apply" gravity="ocr_text" />
   </Image>

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

   <cld-image public-id="sale_sign.jpg" >
     <cld-transformation :overlay="call_text" />
     <cld-transformation flags="region_relative" width="1.1" crop="scale" />
     <cld-transformation flags="layer_apply" gravity="ocr_text" />
   </cld-image>

   Angular (@cloudinary/ng 1.x):

   Copy to clipboard

   //Angular SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sale_sign.jpg").overlay(
     source(
       image("call_text").transformation(
         new Transformation().resize(scale().width(1.1).regionRelative())
       )
     ).position(new Position().gravity(focusOn(ocr())))
   );

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   Copy to clipboard

   <cl-image public-id="sale_sign.jpg" >
     <cl-transformation overlay="call_text">
     </cl-transformation>
     <cl-transformation flags="region_relative" width="1.1" crop="scale">
     </cl-transformation>
     <cl-transformation flags="layer_apply" gravity="ocr_text">
     </cl-transformation>
   </cl-image>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .Overlay(new Layer().PublicId("call_text")).Chain()
     .Flags("region_relative").Width(1.1).Crop("scale").Chain()
     .Flags("layer_apply").Gravity("ocr_text")).BuildImageTag("sale_sign.jpg")

   iOS (cloudinary 3.x):

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setOverlay("call_text").chain()
     .setFlags("region_relative").setWidth(1.1).setCrop("scale").chain()
     .setFlags("layer_apply").setGravity("ocr_text")).generate("sale_sign.jpg")!, cloudinary: cloudinary)

   Android (cloudinary-android 1.x):

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .overlay(new Layer().publicId("call_text")).chain()
     .flags("region_relative").width(1.1).crop("scale").chain()
     .flags("layer_apply").gravity("ocr_text")).generate("sale_sign.jpg");

   Kotlin (kotlin-url-gen 1.x):

   Copy to clipboard

   cloudinary.image {
     publicId("sale_sign.jpg")
      overlay(Overlay.source(
     Source.image("call_text") {
      transformation(Transformation {
      resize(Resize.scale() { width(1.1F)
      regionRelative()
      }) })
      }) {
      position(Position() {
      gravity(
     Gravity.focusOn(
     FocusOn.ocr()))
      })
      }) 
   }.generate()

   

You may also want to position an overlay ensuring that it avoids a special position. See Position overlays avoiding detected faces for an example of how to achieve this.

Layer overflow behavior

By default, if a layer (image or text) has a larger width or height than the base image, the delivered image canvas is resized to display the entire layer. If you want to ensure that the delivered size will never be larger than the base image, you can use the fl_no_overflow flag in the same component as the layer_apply flag.

For example, the no_overflow flag prevents the logo overlay from extending the canvas of the base image (c_scale,w_400/l_cloudinary_icon_blue/fl_layer_apply,fl_no_overflow):

cl_image_tag("flower.jpg", :transformation=>[
  {:width=>400, :crop=>"scale"},
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>["layer_apply", "no_overflow"]}
  ])

(new ImageTag('flower.jpg'))
  ->resize(Resize::scale()->width(400))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue"))
  ->position((new Position())->allowOverflow(false))
  );

cl_image_tag("flower.jpg", array("transformation"=>array(
  array("width"=>400, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>array("layer_apply", "no_overflow"))
  )))

CloudinaryImage("flower.jpg").image(transformation=[
  {'width': 400, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'flags': ["layer_apply", "no_overflow"]}
  ])

cloudinary.image("flower.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {flags: ["layer_apply", "no_overflow"]}
  ]})

cloudinary.url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).imageTag("flower.jpg");

new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );

cloudinary.imageTag('flower.jpg', {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: ["layer_apply", "no_overflow"]}
  ]}).toHtml();

$.cloudinary.image("flower.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: ["layer_apply", "no_overflow"]}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );

<Image publicId="flower.jpg" >
  <Transformation width="400" crop="scale" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags={["layer_apply", "no_overflow"]} />
</Image>

<cld-image public-id="flower.jpg" >
  <cld-transformation width="400" crop="scale" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags={["layer_apply", "no_overflow"]} />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );

<cl-image public-id="flower.jpg" >
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags={{["layer_apply", "no_overflow"]}}>
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply", "no_overflow")).BuildImageTag("flower.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply", "no_overflow")).generate("flower.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).generate("flower.jpg");

cloudinary.image {
  publicId("flower.jpg")
   resize(Resize.scale() { width(400) })
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")) {
   position(Position() { allowOverflow(false) })
   }) 
}.generate()

Layer transformations

You can apply resizing and other transformation options on your overlays just like any other asset delivered from Cloudinary. You can apply multiple (chained) transformations to overlays by adding them in separate components before the layer_apply component. All chained transformations, until a transformation component that includes the layer_apply flag, are applied on the last added overlay or underlay instead of applying them on the base asset (the layer_apply flag closes the layer, similar to a closing bracket).

For example:

1. Adding an overlay of the image called cloudinary_icon_blue, scaled down to 50% of its original width and made into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the brightness effect. The transformed image is then placed as a layer in the top-right corner of the base image (l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east):

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   url:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east/sample.jpg

   Ruby (cloudinary 1.x):

   Copy to clipboard

   cl_image_tag("sample.jpg", :transformation=>[
     {:overlay=>"cloudinary_icon_blue"},
     {:width=>0.5, :crop=>"scale"},
     {:opacity=>70},
     {:effect=>"brightness:50"},
     {:flags=>"layer_apply", :gravity=>"north_east"}
     ])

   PHP (cloudinary_php 2.x):

   Copy to clipboard

   (new ImageTag('sample.jpg'))
     ->overlay(Overlay::source(
     Source::image("cloudinary_icon_blue")
     ->transformation((new Transformation())
     ->resize(Resize::scale()->width(0.5))
     ->adjust(Adjust::opacity(70))
     ->adjust(Adjust::brightness()->level(50)))
     )
     ->position((new Position())
     ->gravity(
     Gravity::compass(
     Compass::northEast()))
     )
     );

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

   Copy to clipboard

   cl_image_tag("sample.jpg", array("transformation"=>array(
     array("overlay"=>"cloudinary_icon_blue"),
     array("width"=>"0.5", "crop"=>"scale"),
     array("opacity"=>70),
     array("effect"=>"brightness:50"),
     array("flags"=>"layer_apply", "gravity"=>"north_east")
     )))

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   Copy to clipboard

   CloudinaryImage("sample.jpg").image(transformation=[
     {'overlay': "cloudinary_icon_blue"},
     {'width': "0.5", 'crop': "scale"},
     {'opacity': 70},
     {'effect': "brightness:50"},
     {'flags': "layer_apply", 'gravity': "north_east"}
     ])

   Node.js (cloudinary 1.x):

   Copy to clipboard

   cloudinary.image("sample.jpg", {transformation: [
     {overlay: "cloudinary_icon_blue"},
     {width: "0.5", crop: "scale"},
     {opacity: 70},
     {effect: "brightness:50"},
     {flags: "layer_apply", gravity: "north_east"}
     ]})

   Java (cloudinary 1.x):

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
     .width(0.5).crop("scale").chain()
     .opacity(70).chain()
     .effect("brightness:50").chain()
     .flags("layer_apply").gravity("north_east")).imageTag("sample.jpg");

   JS (@cloudinary/url-gen 1.x):

   Copy to clipboard

   new CloudinaryImage("sample.jpg").overlay(
     source(
       image("cloudinary_icon_blue").transformation(
         new Transformation()
           .resize(scale().width(0.5))
           .adjust(opacity(70))
           .adjust(brightness().level(50))
       )
     ).position(new Position().gravity(compass("north_east")))
   );

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

   Copy to clipboard

   cloudinary.imageTag('sample.jpg', {transformation: [
     {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
     {width: "0.5", crop: "scale"},
     {opacity: 70},
     {effect: "brightness:50"},
     {flags: "layer_apply", gravity: "north_east"}
     ]}).toHtml();

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   Copy to clipboard

   $.cloudinary.image("sample.jpg", {transformation: [
     {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
     {width: "0.5", crop: "scale"},
     {opacity: 70},
     {effect: "brightness:50"},
     {flags: "layer_apply", gravity: "north_east"}
     ]})

   React (@cloudinary/react 1.x):

   Copy to clipboard

   //React SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sample.jpg").overlay(
     source(
       image("cloudinary_icon_blue").transformation(
         new Transformation()
           .resize(scale().width(0.5))
           .adjust(opacity(70))
           .adjust(brightness().level(50))
       )
     ).position(new Position().gravity(compass("north_east")))
   );

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   Copy to clipboard

   <Image publicId="sample.jpg" >
     <Transformation overlay="cloudinary_icon_blue" />
     <Transformation width="0.5" crop="scale" />
     <Transformation opacity="70" />
     <Transformation effect="brightness:50" />
     <Transformation flags="layer_apply" gravity="north_east" />
   </Image>

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

   <cld-image public-id="sample.jpg" >
     <cld-transformation :overlay="cloudinary_icon_blue" />
     <cld-transformation width="0.5" crop="scale" />
     <cld-transformation opacity="70" />
     <cld-transformation effect="brightness:50" />
     <cld-transformation flags="layer_apply" gravity="north_east" />
   </cld-image>

   Angular (@cloudinary/ng 1.x):

   Copy to clipboard

   //Angular SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sample.jpg").overlay(
     source(
       image("cloudinary_icon_blue").transformation(
         new Transformation()
           .resize(scale().width(0.5))
           .adjust(opacity(70))
           .adjust(brightness().level(50))
       )
     ).position(new Position().gravity(compass("north_east")))
   );

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   Copy to clipboard

   <cl-image public-id="sample.jpg" >
     <cl-transformation overlay="cloudinary_icon_blue">
     </cl-transformation>
     <cl-transformation width="0.5" crop="scale">
     </cl-transformation>
     <cl-transformation opacity="70">
     </cl-transformation>
     <cl-transformation effect="brightness:50">
     </cl-transformation>
     <cl-transformation flags="layer_apply" gravity="north_east">
     </cl-transformation>
   </cl-image>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
     .Width(0.5).Crop("scale").Chain()
     .Opacity(70).Chain()
     .Effect("brightness:50").Chain()
     .Flags("layer_apply").Gravity("north_east")).BuildImageTag("sample.jpg")

   iOS (cloudinary 3.x):

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setOverlay("cloudinary_icon_blue").chain()
     .setWidth(0.5).setCrop("scale").chain()
     .setOpacity(70).chain()
     .setEffect("brightness:50").chain()
     .setFlags("layer_apply").setGravity("north_east")).generate("sample.jpg")!, cloudinary: cloudinary)

   Android (cloudinary-android 1.x):

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
     .width(0.5).crop("scale").chain()
     .opacity(70).chain()
     .effect("brightness:50").chain()
     .flags("layer_apply").gravity("north_east")).generate("sample.jpg");

   Kotlin (kotlin-url-gen 1.x):

   Copy to clipboard

   cloudinary.image {
     publicId("sample.jpg")
      overlay(Overlay.source(
     Source.image("cloudinary_icon_blue") {
      transformation(Transformation {
      resize(Resize.scale() { width(0.5F) })
      adjust(Adjust.opacity(70))
      adjust(Adjust.brightness() { level(50) }) })
      }) {
      position(Position() {
      gravity(
     Gravity.compass(
     Compass.northEast()))
      })
      }) 
   }.generate()

   

2. The base image is scaled to a width of 500 pixels before adding the woman image as an overlay, where the overlay image is automatically cropped to include only the detected face and then scaled to a width of 150 pixels (c_scale,w_500/l_woman/c_crop,g_face/c_scale,w_150/fl_layer_apply):

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   url:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/c_scale,w_500/l_woman/c_crop,g_face/c_scale,w_150/fl_layer_apply/sample.jpg

   Ruby (cloudinary 1.x):

   Copy to clipboard

   cl_image_tag("sample.jpg", :transformation=>[
     {:width=>500, :crop=>"scale"},
     {:overlay=>"woman"},
     {:gravity=>"face", :crop=>"crop"},
     {:width=>150, :crop=>"scale"},
     {:flags=>"layer_apply"}
     ])

   PHP (cloudinary_php 2.x):

   Copy to clipboard

   (new ImageTag('sample.jpg'))
     ->resize(Resize::scale()->width(500))
     ->overlay(Overlay::source(
     Source::image("woman")
     ->transformation((new Transformation())
     ->resize(Resize::crop()
     ->gravity(
     Gravity::focusOn(
     FocusOn::face()))
     )
     ->resize(Resize::scale()->width(150)))
     ));

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

   Copy to clipboard

   cl_image_tag("sample.jpg", array("transformation"=>array(
     array("width"=>500, "crop"=>"scale"),
     array("overlay"=>"woman"),
     array("gravity"=>"face", "crop"=>"crop"),
     array("width"=>150, "crop"=>"scale"),
     array("flags"=>"layer_apply")
     )))

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   Copy to clipboard

   CloudinaryImage("sample.jpg").image(transformation=[
     {'width': 500, 'crop': "scale"},
     {'overlay': "woman"},
     {'gravity': "face", 'crop': "crop"},
     {'width': 150, 'crop': "scale"},
     {'flags': "layer_apply"}
     ])

   Node.js (cloudinary 1.x):

   Copy to clipboard

   cloudinary.image("sample.jpg", {transformation: [
     {width: 500, crop: "scale"},
     {overlay: "woman"},
     {gravity: "face", crop: "crop"},
     {width: 150, crop: "scale"},
     {flags: "layer_apply"}
     ]})

   Java (cloudinary 1.x):

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .width(500).crop("scale").chain()
     .overlay(new Layer().publicId("woman")).chain()
     .gravity("face").crop("crop").chain()
     .width(150).crop("scale").chain()
     .flags("layer_apply")).imageTag("sample.jpg");

   JS (@cloudinary/url-gen 1.x):

   Copy to clipboard

   new CloudinaryImage("sample.jpg")
     .resize(scale().width(500))
     .overlay(
       source(
         image("woman").transformation(
           new Transformation()
             .resize(crop().gravity(focusOn(face())))
             .resize(scale().width(150))
         )
       )
     );

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

   Copy to clipboard

   cloudinary.imageTag('sample.jpg', {transformation: [
     {width: 500, crop: "scale"},
     {overlay: new cloudinary.Layer().publicId("woman")},
     {gravity: "face", crop: "crop"},
     {width: 150, crop: "scale"},
     {flags: "layer_apply"}
     ]}).toHtml();

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   Copy to clipboard

   $.cloudinary.image("sample.jpg", {transformation: [
     {width: 500, crop: "scale"},
     {overlay: new cloudinary.Layer().publicId("woman")},
     {gravity: "face", crop: "crop"},
     {width: 150, crop: "scale"},
     {flags: "layer_apply"}
     ]})

   React (@cloudinary/react 1.x):

   Copy to clipboard

   //React SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sample.jpg")
     .resize(scale().width(500))
     .overlay(
       source(
         image("woman").transformation(
           new Transformation()
             .resize(crop().gravity(focusOn(face())))
             .resize(scale().width(150))
         )
       )
     );

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   Copy to clipboard

   <Image publicId="sample.jpg" >
     <Transformation width="500" crop="scale" />
     <Transformation overlay="woman" />
     <Transformation gravity="face" crop="crop" />
     <Transformation width="150" crop="scale" />
     <Transformation flags="layer_apply" />
   </Image>

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

   <cld-image public-id="sample.jpg" >
     <cld-transformation width="500" crop="scale" />
     <cld-transformation :overlay="woman" />
     <cld-transformation gravity="face" crop="crop" />
     <cld-transformation width="150" crop="scale" />
     <cld-transformation flags="layer_apply" />
   </cld-image>

   Angular (@cloudinary/ng 1.x):

   Copy to clipboard

   //Angular SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("sample.jpg")
     .resize(scale().width(500))
     .overlay(
       source(
         image("woman").transformation(
           new Transformation()
             .resize(crop().gravity(focusOn(face())))
             .resize(scale().width(150))
         )
       )
     );

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   Copy to clipboard

   <cl-image public-id="sample.jpg" >
     <cl-transformation width="500" crop="scale">
     </cl-transformation>
     <cl-transformation overlay="woman">
     </cl-transformation>
     <cl-transformation gravity="face" crop="crop">
     </cl-transformation>
     <cl-transformation width="150" crop="scale">
     </cl-transformation>
     <cl-transformation flags="layer_apply">
     </cl-transformation>
   </cl-image>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .Width(500).Crop("scale").Chain()
     .Overlay(new Layer().PublicId("woman")).Chain()
     .Gravity("face").Crop("crop").Chain()
     .Width(150).Crop("scale").Chain()
     .Flags("layer_apply")).BuildImageTag("sample.jpg")

   iOS (cloudinary 3.x):

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setWidth(500).setCrop("scale").chain()
     .setOverlay("woman").chain()
     .setGravity("face").setCrop("crop").chain()
     .setWidth(150).setCrop("scale").chain()
     .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)

   Android (cloudinary-android 1.x):

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .width(500).crop("scale").chain()
     .overlay(new Layer().publicId("woman")).chain()
     .gravity("face").crop("crop").chain()
     .width(150).crop("scale").chain()
     .flags("layer_apply")).generate("sample.jpg");

   Kotlin (kotlin-url-gen 1.x):

   Copy to clipboard

   cloudinary.image {
     publicId("sample.jpg")
      resize(Resize.scale() { width(500) })
      overlay(Overlay.source(
     Source.image("woman") {
      transformation(Transformation {
      resize(Resize.crop() {
      gravity(
     Gravity.focusOn(
     FocusOn.face()))
      })
      resize(Resize.scale() { width(150) }) })
      })) 
   }.generate()

   

Multiple overlays

Multiple overlays can easily be added as chained transformations to an aset. The following example adds both image and text overlays to the base image as follows:

1. An overlay of an image called couple, cropped to a 120x150 ellipse that includes only the detected faces (l_couple/c_crop,g_faces,h_150,w_120/r_max/fl_layer_apply).
2. An overlay of an image called cloudinary_icon_white with a relative width of 80% of the base image and an opacity of 50% and a brightness of 100 (l_cloudinary_icon_white/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply).
3. The text string "Sample" in bold 'Impact' font with a size of 40 pixels, placed at a distance of 20 pixels from the bottom of the base image (l_text:impact_40_bold:Sample/fl_layer_apply,g_south,y_20).

cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"couple"},
  {:gravity=>"faces", :height=>150, :width=>120, :crop=>"crop"},
  {:radius=>"max"},
  {:flags=>"layer_apply", :gravity=>"north_east"},
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"relative", :width=>0.8, :crop=>"scale"},
  {:opacity=>50},
  {:effect=>"brightness:100"},
  {:flags=>"layer_apply"},
  {:overlay=>{:font_family=>"impact", :font_size=>40, :font_weight=>"bold", :text=>"Sample"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])

(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("couple")
  ->transformation((new Transformation())
  ->resize(Resize::crop()->width(120)
->height(150)
  ->gravity(
  Gravity::focusOn(
  FocusOn::faces()))
  )
  ->roundCorners(RoundCorners::max()))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  )
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.8)
  ->relative()
  )
  ->adjust(Adjust::opacity(50))
  ->adjust(Adjust::brightness()->level(100)))
  ))
  ->overlay(Overlay::source(
  Source::text("Sample",(new TextStyle("impact",40))
  ->fontWeight(
  FontWeight::bold())
  ))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"couple"),
  array("gravity"=>"faces", "height"=>150, "width"=>120, "crop"=>"crop"),
  array("radius"=>"max"),
  array("flags"=>"layer_apply", "gravity"=>"north_east"),
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"relative", "width"=>"0.8", "crop"=>"scale"),
  array("opacity"=>50),
  array("effect"=>"brightness:100"),
  array("flags"=>"layer_apply"),
  array("overlay"=>array("font_family"=>"impact", "font_size"=>40, "font_weight"=>"bold", "text"=>"Sample")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "couple"},
  {'gravity': "faces", 'height': 150, 'width': 120, 'crop': "crop"},
  {'radius': "max"},
  {'flags': "layer_apply", 'gravity': "north_east"},
  {'overlay': "cloudinary_icon_white"},
  {'flags': "relative", 'width': "0.8", 'crop': "scale"},
  {'opacity': 50},
  {'effect': "brightness:100"},
  {'flags': "layer_apply"},
  {'overlay': {'font_family': "impact", 'font_size': 40, 'font_weight': "bold", 'text': "Sample"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {overlay: "couple"},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: "cloudinary_icon_white"},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: {font_family: "impact", font_size: 40, font_weight: "bold", text: "Sample"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})