{"id":22151,"date":"2020-11-03T01:38:07","date_gmt":"2020-11-03T01:38:07","guid":{"rendered":"http:\/\/css_image_effects_five_simple_examples_and_a_quick_animation_guide"},"modified":"2026-03-15T12:55:19","modified_gmt":"2026-03-15T19:55:19","slug":"css_image_effects_five_simple_examples_and_a_quick_animation_guide","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide","title":{"rendered":"CSS Image Effects: 5 Examples and a Quick Animation Guide"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Image effects enliven your web content and help you stand out online. Brand consistency for use of images is handled in your CSS, which defines how images are served to users across web pages. This article describes how to create basic effects, image hover, and animated images through parameter configurations in your main CSS stylesheet. You\u2019ll learn the configuration codes you can use for any CSS, and we\u2019ll show you how <a href=\"https:\/\/cloudinary.com\/products\/image\">Cloudinary has tools<\/a> to help you create CSS image effects much faster and more dynamically.<\/p>\n<p>Here are the key topics we cover in this article (you can use the table of contents to navigate directly to what you\u2019re looking for:<\/p>\n<ul>\n<li>\n<a href=\"#basic\">Basic CSS image effects examples, including<\/a>\n<ul>\n<li>\n<a href=\"#rounded-corners\">Rounded Corners<\/a>\n<\/li>\n<li>\n<a href=\"#image-thumbnails\">Image Thumbnails<\/a>\n<\/li>\n<li>\n<a href=\"#full-page-images\">Full Page Images<\/a>\n<\/li>\n<li>\n<a href=\"#responsive-images\">Responsive Images<\/a>\n<\/li>\n<li>\n<a href=\"#image-transformations\">Image Transformations<\/a>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<a href=\"#hover\">Creating CSS Image Effects on Hover<\/a>\n<\/li>\n<li>\n<a href=\"#animated\">Creating CSS Image Animation Effects<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Creating Image Effects Dynamically With Cloudinary<\/a>\n<ul>\n<li>\n<a href=\"#video\">Video Thumbnails<\/a>\n<\/li>\n<li>\n<a href=\"#padding\">Content-Aware Padding<\/a>\n<\/li>\n<li>\n<a href=\"#product\">Product Galleries<\/a>\n<\/li>\n<li>\n<a href=\"#compilations\">Animated Image Compilations<\/a>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"basic\">Creating Basic Image Effects With CSS<\/h2>  \n<p>This section chronicles five common CSS image effects examples with which you can customize your site\u2019s images for a rich and compelling user experience.<\/p>\n<h3 id=\"rounded-corners\">Rounded Corners<\/h3>\n<p>The common rounded-corners effect delivers a softer touch for web design. If you start with a <a href=\"https:\/\/cloudinary.com\/tools\/square-crop-image\">square image<\/a>, you can round its edges from slightly softening to fully circular. Just set the <code>border-radius<\/code> property with a value in <code>px<\/code>, <code>em<\/code>, or <code>%<\/code> format.<\/p>\n<p>You can also configure each corner separately, creating obloid shapes. To do that, specify the values in the order of top-left, top-right, bottom-right, and bottom-left. See this example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/* slighty_rounded *\/\nimg {\n  border-radius: 15px;\n}\n\n\/* ellipse from rectangle or circle from square*\/\nimg {\n  border-radius: 50%;\n}\n<\/code><\/pre>\n<h3 id=\"image-thumbnails\">Image Thumbnails<\/h3>\n<p>Serving as placeholders for links to another site or page, thumbnails are especially useful in product galleries on e-commerce sites. With image thumbnails as a preview, the audience can decide whether to click them to see the details.<\/p>\n<p>To create a thumbnail, specify its image properties, for example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  border: 2px solid #ddd;\n  border-radius: 3px;\n  padding: 5px;\n  width: 350px;\n}\n<\/code><\/pre>\n<p>The above code creates a thumbnail that is a good size for tiling in a gallery. A light-gray border with rounded edges identifies the thumbnail as being interactive.<\/p>\n<h3 id=\"full-page-images\">Full Page Backgrounds<\/h3>\n<p>Full-page backgrounds are a great choice for embellishing webpages, but be sure to pick images that are not overwhelming. These backgrounds are especially ideal for high-resolution images that you want to display in a large-enough size without having the audience open them separately.<\/p>\n<p>To create a full-page background, add the <code>background-size:<\/code> property to your <code>main<\/code> or <code>body<\/code> styling and then specify how you want the background to be filled. Here are the options:<\/p>\n<ul>\n<li>\n<code>auto<\/code>: Sets the original size.<\/li>\n<li>\n<code>length<\/code>: Sets the image length.<\/li>\n<li>\n<code>percentage<\/code>: Sets the image width and height as a percentage of the parent element.<\/li>\n<li>\n<code>cover<\/code>: Resizes the image to cover the viewport, sometimes necessitating stretching or cropping.<\/li>\n<li>\n<code>contain<\/code>: Resizes the image to the maximum size that can fit into the viewport without cropping.<\/li>\n<\/ul>\n<p><code>background-size:<\/code> is often combined with <code>background-position: center;<\/code>, which centers the image in the viewport; and with <code>background-repeat: no-repeat;<\/code>, which ensures a once-only display.<\/p>\n<p>This example produces a centered, full-screen image:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>body {\n  background: url(example.jpg);\n  background-position: center;\n  background-size: cover;\n}\n<\/code><\/pre>\n<h3 id=\"responsive-images\">Responsive Image Sizes<\/h3>\n<p>Responsive images resize themselves in real time to suit the user\u2019s browser size, protecting your page design by ensuring that images do not overwhelm your site on smaller screens and that larger images are displayed on larger screens.<\/p>\n<p>To make an image fully responsive, define several media queries in your CSS code that specify which image to display for each screen size; be sure to prepare several images in the relevant sizes. Next, set breakpoints that define where the interface is to switch from one image to another. For details, see this article: <a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">How to Create Images for Responsive Web Design<\/a>.<\/p>\n<p>Additionally, you can add basic responsiveness by simply specifying a maximum height or width for the image and setting the other property to <code>auto<\/code>. Feel free to specify the width value in percentages or viewport widths.<\/p>\n<p>The following example displays the image at 70 percent of the viewport width:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  max-width: 70vw;\n  height: auto;\n}\n<\/code><\/pre>\n<p>For more details, see our articles on <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">CSS resizing<\/a> and <a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\">JavaScript resizing<\/a>.<\/p>\n<h3 id=\"image-transformations\">Image Transformations<\/h3>\n<p>With the <code>transform<\/code> property, you can apply a two-dimensional (2D) or three-dimensional (3D) effect to images. <code>transform<\/code> offers options for scaling, rotating, skewing, and changing image perspectives. When combined with JavaScript or animation modules, this property can add active rotations or movement to images.<\/p>\n<p>The <code>transform<\/code> property is somewhat new, not fully supported by older browsers (though use of legacy browsers is not common). To ensure that <code>transform<\/code> works there, prefix the property with <code>-webkit-<\/code>, <code>-moz-<\/code>, and <code>-ms-<\/code>, as in the example below, which shows a transformation that rotates and skews an image.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n-webkit-transform: rotate(20deg) skewY(20deg); \/Chrome, Safari, Opera\/\n-moz-transform: rotate(20deg) skewY(20deg); \/Firefox\/\n-ms-transform: rotate(20deg) skewY(20deg); \/ Internet Explorer \/\n}\n<\/code><\/pre>\n<h2 id=\"hover\">Creating CSS Image Effects on Hover<\/h2>  \n<p>With CSS, you can also create dynamic effects, a common one of which is the hover CSS image change animation effect. This styling, which changes the selected element on a mouseover of the element, temporarily applies another image effect. For example, you can change the image itself or its size, or display text over it.<\/p>\n<p><strong>Warning:<\/strong> Hover pseudo classes can cause bugs on mobile browsers like Chromium.<\/p>\n<p>The following code causes the image <code>example.jpg<\/code> to assume full size when hovered over:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;img class=\u2019hover_effect\u2019 src=\u2019example.jpg\u2019\/&gt;\n\n.hover_effect {\n  height:25%;\n  width: auto; \n}\n \n.hover_effect:hover {\n  height: 100%;\n  width: auto;\n}\n<\/code><\/pre>\n<p>You can change any other element on your page in the same way. For example, this code changes the opacity of an image:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  width:1900px;\n  height:1900px;\n  opacity: 1;\n}\n\nimg:hover {\n  opacity: 0.2;\n}\n<\/code><\/pre>\n<h2>Basic Context for CSS Image Animation Effects<\/h2>\n<p>\nTo animate an element using CSS, it&#8217;s important to understand its basic structure. For a successful CSS animation, you require:\n<\/p>\n<ul>\n<li>An HTML element you want to animate.\n<li>A specific CSS rule that ties the animation to that element.\n<li>A set of keyframes that decide the initial and final styles for the animation.\n<\/li>\n<\/ul>\n<p>\nCustomization options like adjusting the speed and delay can enhance the user experience. For instance, you might want an image to fade in slowly or an icon to bounce with a delay. By using the appropriate CSS properties, you can customize your animations to create the desired effect.\n<\/p>\n<p>\nFor those wanting to delve into more advanced CSS animation sequences:\n<\/p>\n<ol>\n<li>Begin by styling the element you want to animate using the animation property or its associated sub-properties.\n<li>Configure the specifics such as timing, duration, and other nuances of how the animation sequence should evolve over time.\n<\/li>\n<\/ol>\n<p>\nFor those seeking external references and inspiration, platforms like FreeFrontend, Codepen, and GitHub offer a plethora of examples and snippets related to CSS image effects. Moreover, for a streamlined experience, you can employ libraries like Animate.css. This cross-browser library of CSS animations is versatile and easy to integrate. Notably, Animate.css employs custom properties (commonly known as CSS variables) that allow users to define parameters of animations like duration, delay, and repetitions.\n<\/p>\n<h2 id=\"animated\">Creating CSS Image Animation<\/h2>  \n<p>Animation, which adds sprightliness to images, can make them interactive while leveraging the effects described above plus others. With a few code tricks in your playbook, CSS image animation effects are not difficult to implement. You can style images with animation in one of two ways, as described below.<\/p>\n<h3>Switch Between Two Images on Hover<\/h3>\n<p>One way to apply rollover image effects is to seemingly fade between images when the user hovers over them. You do that by stacking one image on top of the other and changing the opacity of the top image. The code below creates a fade-out-and-fade-in effect, which starts when the cursor moves over the image and reverses as soon as the cursor moves away. The top part ensures that the effect works in older Chrome and Firefox browsers.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;div id=&quot;fade_out&quot;&gt;\n  &lt;img class=&quot;bottom&quot; src=&quot;\/images\/image1.jpg&quot; \/&gt;\n  &lt;img class=&quot;top&quot; src=&quot;\/images\/image2.jpg&quot; \/&gt;\n&lt;\/div&gt;\n\n#fade_out {\n  position:relative;\n  height:100%;\n  width:auto;\n  margin:0 auto;\n}\n\n#fade_out img {\n  position:absolute;\n  left:0;\n  -webkit-transition: opacity 2s linear;\n  -moz-transition: opacity 2s linear;\n  transition: opacity 2s linear;\n}\n\n#fade_out img.top:hover {\n  opacity:0;\n}\n<\/code><\/pre>\n<h3>Switch Between Two Images on a Timer<\/h3>\n<p>Another animation you can create is with keyframes, a CSS module that enables that creation through a definition of image states and configurations of their behavior.<\/p>\n<p>The code below creates an animation that swaps between two selected images. The top part defines the keyframe\u2019s animation pattern.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;div id=&quot;fading&quot;&gt;\n&lt;img class=&quot;bottom&quot; src=&quot;banner55.jpg&quot; \/&gt;\n&lt;img class=&quot;top&quot; src=&quot;banner02.jpg&quot; \/&gt;\n&lt;\/div&gt;\n\n  @keyframes FadeInOut {\n  0% {opacity:1;}\n  25% {opacity:.75;}\n  50% {opacity:.5;}\n  100% {opacity:0;}\n}\n<\/code><\/pre>\n<p>Next, apply that pattern to your image, defining the transition effects, the number of times to repeat the animation, the duration of the animation, etc. The code below causes the image to fade in and out in a 10-second loop:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>#fading img {\nposition:absolute;\nleft:0;\n}\n<\/code><\/pre>\n<p>For Chrome, Mozilla, or Safari:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>#fading img.top {\n-webkit-animation-name: FadeInOut;\n-webkit-animation-timing-function: ease-in-out;\n-webkit-animation-iteration-count: infinite;\n-webkit-animation-duration: 10s;\n-webkit-animation-direction: alternate;\n}\n<\/code><\/pre>\n<p>For Internet Explorer:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>#fading img.top {\nanimation-name: FadeInOut;\nanimation-timing-function: ease-in-out;\nanimation-iteration-count: infinite;\nanimation-duration: 10s;\nanimation-direction: alternate;\n}\n<\/code><\/pre>\n<h2 id=\"cloudinary\">Creating Image Effects Dynamically With Cloudinary<\/h2>  \n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free-forever subscription plan<\/a>. While on that platform, you can upload your images, apply built-in effects, filters, and modifications. You can also create images effects that are difficult or impossible to produce with just CSS.<\/p>\n<p>Additionally, you can transform images programmatically with <a href=\"https:\/\/cloudinary.com\/documentation\">SDKs<\/a> or simple URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes\u2014a huge convenience and time saver.<\/p>\n<p>The subsections below describe how to apply a few cool effects to images with Cloudinary\u2014beyond what you can do with regular <a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\">CSS image filters<\/a>. Each of the subsections links to a <a href=\"https:\/\/cloudinary.com\/cookbook\">Cloudinary Cookbook<\/a> page with more details.<\/p>\n<h3 id=\"video\">Video Thumbnails<\/h3>\n<p>With Cloudinary, you can easily create <a href=\"https:\/\/cloudinary.com\/blog\/generating_video_thumbnails_from_youtube_and_other_video_sites\">thumbnails for video content<\/a> and post it on popular video sites, including YouTube, Hulu, Dailymotion, Vimeo, and Animoto. Use the first frame of your video as the thumbnail image.<\/p>\n<p>One way to create a thumbnail is by adding to the end of the video URL the video site name (<code>vimeo<\/code>) and the video ID (<code>39482584<\/code>), followed by the image format (<code>.jpg<\/code> or <code>.png<\/code>). For example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;39482584.jpg\\&quot;, {type: \\&quot;vimeo\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;39482584.jpg\\&quot;, {type: \\&quot;vimeo\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;39482584.jpg\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;39482584.jpg&#039;, {type: \\&quot;vimeo\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;39482584.jpg&#039;, {type: \\&quot;vimeo\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;39482584.jpg\\&quot;).image(type=\\&quot;vimeo\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;39482584.jpg\\&quot;).image(type=\\&quot;vimeo\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;39482584.jpg&#039;))\\n\\t-&gt;deliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;39482584.jpg&#039;))\\n\\t-&gt;deliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;vimeo\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.jpg\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;vimeo\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().type(\\&quot;vimeo\\&quot;).imageTag(\\&quot;39482584.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().type(\\&quot;vimeo\\&quot;).imageTag(\\&quot;39482584.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.jpg\\&quot;, type: \\&quot;vimeo\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.jpg\\&quot;, type: \\&quot;vimeo\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Action(\\&quot;vimeo\\&quot;).BuildImageTag(\\&quot;39482584.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Action(\\&quot;vimeo\\&quot;).BuildImageTag(\\&quot;39482584.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.jpg&#039;).transformation(Transformation()\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.jpg&#039;).transformation(Transformation()\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;vimeo\\&quot;).generate(\\&quot;39482584.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;vimeo\\&quot;).generate(\\&quot;39482584.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().type(\\&quot;vimeo\\&quot;).generate(\\&quot;39482584.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().type(\\&quot;vimeo\\&quot;).generate(\\&quot;39482584.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.jpg&#039;).transformation(Transformation()\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.jpg&#039;).transformation(Transformation()\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;39482584.jpg\\&quot;)\\n\\t deliveryType(\\&quot;vimeo\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;39482584.jpg\\&quot;)\\n\\t deliveryType(\\&quot;vimeo\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;39482584.jpg\\&quot;, {type: \\&quot;vimeo\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;39482584.jpg\\&quot;, {type: \\&quot;vimeo\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.jpg\\&quot;).setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/vimeo\\\/39482584.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;vimeo&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;39482584.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/vimeo\/39482584.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/vimeo\/39482584.jpg\" alt=\"Image showing video thumbnail image of George Clooney holding an award as one of CSS image effects examples with Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1280\" height=\"712\"\/><\/a><\/p>\n<p>You can also stack effects to customize the thumbnail. For example, add smart cropping (<code>c_thumb<\/code>) with a focus on the face (<code>g_face<\/code>) and filter effects (<code>e_saturation:-70<\/code>), like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;39482584.png\\&quot;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;39482584.png\\&quot;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;Transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\t&lt;Transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;cld-transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\t&lt;cld-transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt; &lt;cl-transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;39482584.png\\&quot; type=\\&quot;vimeo\\&quot;&gt;\\n\\t&lt;cl-transformation gravity=\\&quot;face\\&quot; width=\\&quot;200\\&quot; height=\\&quot;220\\&quot; radius=\\&quot;20\\&quot; effect=\\&quot;saturation:-70\\&quot; crop=\\&quot;thumb\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;39482584.png&#039;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;39482584.png&#039;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;39482584.png\\&quot;).image(gravity=\\&quot;face\\&quot;, width=200, height=220, radius=20, effect=\\&quot;saturation:-70\\&quot;, crop=\\&quot;thumb\\&quot;, type=\\&quot;vimeo\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;39482584.png\\&quot;).image(gravity=\\&quot;face\\&quot;, width=200, height=220, radius=20, effect=\\&quot;saturation:-70\\&quot;, crop=\\&quot;thumb\\&quot;, type=\\&quot;vimeo\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;39482584.png&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(200)\\n-&gt;height(220)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\n\\t)\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20))\\n\\t-&gt;adjust(Adjust::saturation()-&gt;level(-70))\\n\\t-&gt;deliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;39482584.png&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(200)\\n-&gt;height(220)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\n\\t)\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20))\\n\\t-&gt;adjust(Adjust::saturation()-&gt;level(-70))\\n\\t-&gt;deliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.png\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;width\\&quot;=&gt;200, \\&quot;height\\&quot;=&gt;220, \\&quot;radius\\&quot;=&gt;20, \\&quot;effect\\&quot;=&gt;\\&quot;saturation:-70\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;, \\&quot;type\\&quot;=&gt;\\&quot;vimeo\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.png\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;width\\&quot;=&gt;200, \\&quot;height\\&quot;=&gt;220, \\&quot;radius\\&quot;=&gt;20, \\&quot;effect\\&quot;=&gt;\\&quot;saturation:-70\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;, \\&quot;type\\&quot;=&gt;\\&quot;vimeo\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;face\\&quot;).width(200).height(220).radius(20).effect(\\&quot;saturation:-70\\&quot;).crop(\\&quot;thumb\\&quot;)).type(\\&quot;vimeo\\&quot;).imageTag(\\&quot;39482584.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;face\\&quot;).width(200).height(220).radius(20).effect(\\&quot;saturation:-70\\&quot;).crop(\\&quot;thumb\\&quot;)).type(\\&quot;vimeo\\&quot;).imageTag(\\&quot;39482584.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.png\\&quot;, gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;39482584.png\\&quot;, gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;face\\&quot;).Width(200).Height(220).Radius(20).Effect(\\&quot;saturation:-70\\&quot;).Crop(\\&quot;thumb\\&quot;)).Action(\\&quot;vimeo\\&quot;).BuildImageTag(\\&quot;39482584.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;face\\&quot;).Width(200).Height(220).Radius(20).Effect(\\&quot;saturation:-70\\&quot;).Crop(\\&quot;thumb\\&quot;)).Action(\\&quot;vimeo\\&quot;).BuildImageTag(\\&quot;39482584.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(200)\\n.height(220)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.roundCorners(RoundCorners.byRadius(20))\\n\\t.adjust(Adjust.saturation().level(-70))\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(200)\\n.height(220)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.roundCorners(RoundCorners.byRadius(20))\\n\\t.adjust(Adjust.saturation().level(-70))\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;vimeo\\&quot;).setTransformation(CLDTransformation().setGravity(\\&quot;face\\&quot;).setWidth(200).setHeight(220).setRadius(20).setEffect(\\&quot;saturation:-70\\&quot;).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;39482584.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;vimeo\\&quot;).setTransformation(CLDTransformation().setGravity(\\&quot;face\\&quot;).setWidth(200).setHeight(220).setRadius(20).setEffect(\\&quot;saturation:-70\\&quot;).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;39482584.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;face\\&quot;).width(200).height(220).radius(20).effect(\\&quot;saturation:-70\\&quot;).crop(\\&quot;thumb\\&quot;)).type(\\&quot;vimeo\\&quot;).generate(\\&quot;39482584.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;face\\&quot;).width(200).height(220).radius(20).effect(\\&quot;saturation:-70\\&quot;).crop(\\&quot;thumb\\&quot;)).type(\\&quot;vimeo\\&quot;).generate(\\&quot;39482584.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70\\&quot;)\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;39482584.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70\\&quot;)\\n\\t.setDeliveryType(\\&quot;vimeo\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;39482584.png\\&quot;)\\n\\t resize(Resize.thumbnail() { width(200)\\n height(220)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t })\\n\\t roundCorners(RoundCorners.byRadius(20))\\n\\t adjust(Adjust.saturation() { level(-70) })\\n\\t deliveryType(\\&quot;vimeo\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;39482584.png\\&quot;)\\n\\t resize(Resize.thumbnail() { width(200)\\n height(220)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t })\\n\\t roundCorners(RoundCorners.byRadius(20))\\n\\t adjust(Adjust.saturation() { level(-70) })\\n\\t deliveryType(\\&quot;vimeo\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;39482584.png\\&quot;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;39482584.png\\&quot;, {gravity: \\&quot;face\\&quot;, width: 200, height: 220, radius: 20, effect: \\&quot;saturation:-70\\&quot;, crop: \\&quot;thumb\\&quot;, type: \\&quot;vimeo\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;39482584.png\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(200)\\n      .height(220)\\n      .gravity(focusOn(face()))\\n  )\\n  .roundCorners(byRadius(20))\\n  .adjust(saturation().level(-70))\\n  .setDeliveryType(\\&quot;vimeo\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/vimeo\\\/c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70\\\/39482584.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;vimeo&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;crop_mode&quot;:&quot;thumb&quot;,&quot;gravity&quot;:&quot;face&quot;,&quot;width&quot;:&quot;200&quot;,&quot;height&quot;:&quot;220&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;effect&quot;:&quot;saturation:-70&quot;}],&quot;transformation_string&quot;:&quot;c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;39482584.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/vimeo\/c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70\/39482584.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/vimeo\/c_thumb,g_face,w_200,h_220,r_20,e_saturation:-70\/39482584.png\" alt=\"Image showing video thumbnail image of George Clooney\u2019s face via \u201cfocus on the face\u201d customization as one of CSS image effects examples with Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"200\" height=\"220\"\/><\/a><\/p>\n<h3 id=\"padding\">Content-Aware Padding<\/h3>\n<p>By applying <a href=\"https:\/\/cloudinary.com\/cookbook\/using_content_aware_padding\">content-aware padding<\/a> with the <code>b_auto<\/code> parameter, you can have Cloudinary automatically set a padding around your image in a color that matches the border pixels, the predominant color, the predominant contrast color, or the color of the border pixels.\nFor example:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:border\/tulip.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:border\/tulip.jpg\" alt=\"Image showing image of flowers with padding customization using border pixels as one of CSS image effects examples with Cloudinary\" title=\"border\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>b_auto:border<\/b> \n<\/span>\n<span style=\"display:inline-block;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:predominant\/tulip.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:predominant\/tulip.jpg\" alt=\"Image showing image of flowers with padding customization using predominant color as one of CSS image effects examples with Cloudinary\" title=\"predominant\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>b_auto:predominant<\/b>\n<\/span>\n<span style=\"display:inline-block;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:border_contrast\/tulip.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:border_contrast\/tulip.jpg\" alt=\"Image showing image of flowers with padding customization using contrasting color as one of CSS image effects examples with Cloudinary\" title=\"border_contrast\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>b_auto:border_contrast<\/b>\n<\/span>\n<span style=\"display:inline-block;align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:border_contrast\/tulip.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200,w_200,c_pad,b_auto:predominant_contrast\/tulip.jpg\" alt=\"Image showing image of flowers with padding customization using predominant contrasting color as one of CSS image effects examples with Cloudinary\" title=\"predominant_contrast\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>b_auto:predominant_contrast<\/b>\n<\/span>\n<\/div>\n<p>As an enhancement, specify the <code>gradient_type<\/code>, <code>number<\/code>, and <code>direction<\/code> properties.<\/p>\n<p>For example:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block; margin-left: 50px\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_300,w_300,c_pad,b_auto:predominant_gradient:2:diagonal_desc\/horse.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_300,w_300,c_pad,b_auto:predominant_gradient:2:diagonal_desc\/horse.jpg\" alt=\"Image showing image of a unicorn with graded padding customization using directional gradient color as one of CSS image effects examples with Cloudinary\" title=\"predominant\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>predominant_gradient:2:diagonal_desc<\/b>\n<\/span>\n<span style=\"display:inline-block; margin-left: 10px\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_300,w_300,c_pad,b_auto:predominant_gradient_contrast:4\/horse.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_300,w_300,c_pad,b_auto:predominant_gradient_contrast:4\/horse.jpg\" alt=\"Image showing image of a unicorn with graded padding customization using gradient contrasting color as one of CSS image effects examples with Cloudinary\" title=\"border_contrast\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b>predominant_gradient_contrast:4<\/b>\n<\/span>\n<\/div>\n<h3 id=\"product\">Product Galleries<\/h3>\n<p>Product galleries built with Cloudinary display images with interactive carousels, a capability that would be difficult to implement with CSS alone. The process requires a lightweight, pure <a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery\">JavaScript widget<\/a> called <code>galleryWidget<\/code>, which you can add to your pages in a snap.<\/p>\n<p>Afterwards, you can display static images and videos with a 360-degree spinning effect. You can also enable click swapping with images, arrows, or scrolling.<\/p>\n<div id=\"my-gallery\" style=\"max-width:80%;margin:auto\">\n<\/div>\n<!-- \n  We defer the script to optimize the loading experience.\n  We need to run additional JS after the deferred script loads so we use the onload attribute here.\n  It's a little odd, but it works\n-->\n<script defer src=\"https:\/\/product-gallery.cloudinary.com\/all.js\" type=\"text\/javascript\" onload='const myGallery= cloudinary.galleryWidget({\n  container: \"#my-gallery\",\n  cloudName: \"demo\",\n  mediaAssets: [\n    {tag: \"electric_car_product_gallery_demo\"},\n    {tag: \"electric_car_product_gallery_demo\", mediaType: \"video\"}, \n    {tag: \"electric_car_360_product_gallery_demo\", mediaType: \"spin\"}\n  ]\n});myGallery.render();'>\n<\/script>  \n<h3>Animation CSS Image Effects on Hover for Links to Categories or Post Types<\/h3>\n<p>Hover animations are not only limited to changing image sizes or opacities. They can be used for interactive links to different categories or post types on your website. For instance, a hover effect could change the color or border of a category link, enhancing user engagement and navigation experience.<\/p>\n<h3>Color Animation<\/h3>\n<p>Another exciting aspect of CSS animations is the ability to animate colors and gradients. This can be particularly effective for backgrounds, buttons, or even text. For example, a gradient could smoothly transition between two colors, adding a lively and dynamic feel to your web pages.<\/p>\n<h3>Infinite Loading Animation<\/h3>\n<p>To improve user experience during longer loading times, CSS offers the capability to create infinite loading animations. These animations can be simple spinning icons or creative graphics that indicate the site is processing, without giving a specific wait time.<\/p>\n<h3>Parallax Scrolling Effect<\/h3>\n<p>CSS allows for the creation of parallax scrolling effects. This technique involves moving the background content at a different speed than the foreground content during scrolling, creating an illusion of depth and making the website more immersive and engaging.<\/p>\n<h3>Gallery Widget<\/h3>\n<p><code>galleryWidget<\/code> even supports interactive 360-degree images. The rotation effect is controlled by mouse movement, which you can limit to a single plane (as in the example below) or set to full 3D. The latter is particularly useful for displaying 3D products.<\/p>\n<h3 id=\"compilations\">Animated Image Compilations<\/h3>\n<p>You can easily create animated images or videos through Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/image_upload_api_reference#multi_method\"><code>multi<\/code> method by<\/a> combining images into a single item. Identify the images in question with a tag that you specify.<\/p>\n<p>Here\u2019s what to do:<\/p>\n<ol>\n<li>\n<p>Programmatically define the tag that you want to target.<\/p>\n<p>Once the definition executes, Cloudinary returns a response with the new image\u2019s URL.<\/p>\n<\/li>\n<li>\n<p>Add the URL to your site content to display the image.<\/p>\n<p>This code example, written in Node.js, creates an animated GIF:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cloudinary.v2.uploader.multi('logo',\n  function(error,result) {console.log(result, error) });\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>Here\u2019s the response:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>{\n  &quot;url&quot;: &quot;http:\/\/res.cloudinary.com\/demo\/image\/multi\/v1473690796\/logo.gif&quot;,\n  &quot;secure_url&quot;: &quot;https:\/\/res.cloudinary.com\/demo\/image\/multi\/v1473690796\/logo.gif&quot;,\n  &quot;public_id&quot;: &quot;logo&quot;,\n  &quot;version&quot;: 1473690796\n}\n<\/code><\/pre>\n<p>The animated GIF looks like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;logo.gif\\&quot;, {type: \\&quot;multi\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;logo.gif\\&quot;, {type: \\&quot;multi\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;logo.gif\\&quot; type=\\&quot;multi\\&quot;&gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;logo.gif&#039;, {type: \\&quot;multi\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;logo.gif&#039;, {type: \\&quot;multi\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;logo.gif\\&quot;).image(type=\\&quot;multi\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;logo.gif\\&quot;).image(type=\\&quot;multi\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;logo.gif&#039;))\\n\\t-&gt;version(1473690796)\\n\\t-&gt;deliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;logo.gif&#039;))\\n\\t-&gt;version(1473690796)\\n\\t-&gt;deliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.gif\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;multi\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.gif\\&quot;, array(\\&quot;type\\&quot;=&gt;\\&quot;multi\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().type(\\&quot;multi\\&quot;).imageTag(\\&quot;logo.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().type(\\&quot;multi\\&quot;).imageTag(\\&quot;logo.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.gif\\&quot;, type: \\&quot;multi\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;logo.gif\\&quot;, type: \\&quot;multi\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Action(\\&quot;multi\\&quot;).BuildImageTag(\\&quot;logo.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Action(\\&quot;multi\\&quot;).BuildImageTag(\\&quot;logo.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;logo.gif&#039;).transformation(Transformation()\\n\\t.version(1473690796)\\n\\t.setDeliveryType(\\&quot;multi\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;logo.gif&#039;).transformation(Transformation()\\n\\t.version(1473690796)\\n\\t.setDeliveryType(\\&quot;multi\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;multi\\&quot;).generate(\\&quot;logo.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setType( \\&quot;multi\\&quot;).generate(\\&quot;logo.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().type(\\&quot;multi\\&quot;).generate(\\&quot;logo.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().type(\\&quot;multi\\&quot;).generate(\\&quot;logo.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;logo.gif&#039;).transformation(Transformation()\\n\\t.version(1473690796)\\n\\t.setDeliveryType(\\&quot;multi\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;logo.gif&#039;).transformation(Transformation()\\n\\t.version(1473690796)\\n\\t.setDeliveryType(\\&quot;multi\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;logo.gif\\&quot;)\\n\\t version(1473690796)\\n\\t deliveryType(\\&quot;multi\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;logo.gif\\&quot;)\\n\\t version(1473690796)\\n\\t deliveryType(\\&quot;multi\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;logo.gif\\&quot;, {type: \\&quot;multi\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;logo.gif\\&quot;, {type: \\&quot;multi\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;logo.gif\\&quot;).setVersion(1473690796).setDeliveryType(\\&quot;multi\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/multi\\\/v1473690796\\\/logo.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;multi&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1473690796&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;logo.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/multi\/v1473690796\/logo.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/multi\/v1473690796\/logo.gif\" alt=\"gif\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"275\" height=\"250\"\/><\/a><\/p>\n<h3>Harnessing Libraries &#038; External Resources for CSS Animations<\/h3>\n<p>\nWhile pure CSS can work wonders in animation, sometimes, you might want a little more versatility or a quicker solution. This is where external resources like libraries come into play. Animate.css, for instance, is a cross-browser library filled with a plethora of CSS animations. It employs custom properties (also referred to as CSS variables) to effortlessly define and manage animation properties such as duration, delay, and iterations. If you&#8217;re ever in a bind or just want to explore a vast range of pre-defined animations, resources like Animate.css can be invaluable. Remember, it&#8217;s not just about crafting the animation, but also about ensuring its smooth and consistent performance across different browsers and devices.\n<\/p>\n<h2 id=\"resources\"> Learning More About Cloudinary<\/h2> \n<p>Besides the capability for creating image effects, Cloudinary offers a multitude of robust tools for web developers, including the following:<\/p>\n<ul>\n<li>\n<strong>Automated image uploads.<\/strong> You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.<\/li>\n<li>\n<strong>Generous image storage.<\/strong> Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.<\/li>\n<li>\n<strong>Seamless asset management.<\/strong> You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.<\/li>\n<li>\n<strong>Effective image manipulation.<\/strong> You can manipulate, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.<\/li>\n<li>\n<strong>Automated image optimization.<\/strong> Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.<\/li>\n<li>\n<strong>Responsive images.<\/strong> Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.<\/li>\n<li>\n<strong>Reliable and fast image delivery.<\/strong> Cloudinary delivers images through Content Delivery Networks (CDNs) \u2014 Akamai, Fastly, and CloudFront \u2014 with no integration or management on your part.<\/li>\n<\/ul>\n<p>Do give Cloudinary a try. To start, <a href=\"https:\/\/cloudinary.com\/pricing\">sign up<\/a> for a free account.<\/p>\n<h2 id=\"css\">Check Out the Details of CSS Images<\/h2> \n<p>Want to learn more about CSS images? These articles are an excellent resource:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">Working With CSS Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\">CSS Image Overlay: Overlaying Text and Images for Visual Effect<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">Image Resizing: Manually With CSS and Automatically With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\">Creating Image-Filter Effects With CSS and Riveting Transformations<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\">Rotating Images in JavaScript: Three Quick Tutorials<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\">Cool Tricks for Resizing Images in JavaScript<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22152,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,227],"class_list":["post-22151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Image Effects: 5 Examples Including Image Animation, Hover Effects, Padding, and More<\/title>\n<meta name=\"description\" content=\"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Image Effects: 5 Examples and a Quick Animation Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-03T01:38:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-15T19:55:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"CSS Image Effects: 5 Examples and a Quick Animation Guide\",\"datePublished\":\"2020-11-03T01:38:07+00:00\",\"dateModified\":\"2026-03-15T19:55:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA\",\"keywords\":[\"CSS\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\",\"url\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\",\"name\":\"CSS Image Effects: 5 Examples Including Image Animation, Hover Effects, Padding, and More\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA\",\"datePublished\":\"2020-11-03T01:38:07+00:00\",\"dateModified\":\"2026-03-15T19:55:19+00:00\",\"description\":\"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing graphic of the elements of CSS image effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Image Effects: 5 Examples and a Quick Animation Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Image Effects: 5 Examples Including Image Animation, Hover Effects, Padding, and More","description":"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide","og_locale":"en_US","og_type":"article","og_title":"CSS Image Effects: 5 Examples and a Quick Animation Guide","og_description":"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide","og_site_name":"Cloudinary Blog","article_published_time":"2020-11-03T01:38:07+00:00","article_modified_time":"2026-03-15T19:55:19+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide"},"author":{"name":"","@id":""},"headline":"CSS Image Effects: 5 Examples and a Quick Animation Guide","datePublished":"2020-11-03T01:38:07+00:00","dateModified":"2026-03-15T19:55:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","keywords":["CSS","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide","url":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide","name":"CSS Image Effects: 5 Examples Including Image Animation, Hover Effects, Padding, and More","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","datePublished":"2020-11-03T01:38:07+00:00","dateModified":"2026-03-15T19:55:19+00:00","description":"Learn how to apply basic, hover, and animated effects to images with CSS and dynamically perform those tasks with Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","width":1540,"height":847,"caption":"Image showing graphic of the elements of CSS image effects"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Image Effects: 5 Examples and a Quick Animation Guide"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718598\/Web_Assets\/blog\/CSS-Image-Effect_2215249fcb\/CSS-Image-Effect_2215249fcb.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22151"}],"version-history":[{"count":15,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22151\/revisions"}],"predecessor-version":[{"id":39880,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22151\/revisions\/39880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22152"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}