Change image opacity

Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.

Original

Original

50% opacity

50% opacity

Flashlight effect

Flashlight effect
Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
by Itay Taragano