Cloudinary Blog

CSS Image Effects: Five Simple Examples and a Quick Animation Guide

CSS Image Effects: Five Simple Examples and a Quick Animation Guide

Image effects, which you can set up with CSS, define how images are served to users. This article describes how to create basic effects, image hover, and animated images through parameter configurations in your main CSS stylesheet and—much faster and dynamically—in Cloudinary.

Here are the topics:

Creating Basic Image Effects With CSS

This section chronicles five basic CSS effects with which you can customize your site’s images for a rich and compelling user experience.

Rounded Corners

The common rounded-corners effect delivers a softer touch. If you start with a square image, you can round its edges from slightly softening to fully circular. Just set the border-radius property with a value in px, em, or % format.

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:

Copy to clipboard
/* slighty_rounded */
img {
  border-radius: 15px;
}

/* ellipse from rectangle or circle from square*/
img {
  border-radius: 50%;
}

Image Thumbnails

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.

To create a thumbnail, specify its image properties, for example:

Copy to clipboard
img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

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.

Full-Page Backgrounds

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.

To create a full-page background, add the background-size: property to your main or body styling and then specify how you want the background to be filled. Here are the options:

  • auto: Sets the original size.
  • length: Sets the image length.
  • percentage: Sets the image width and height as a percentage of the parent element.
  • cover: Resizes the image to cover the viewport, sometimes necessitating stretching or cropping.
  • contain: Resizes the image to the maximum size that can fit into the viewport without cropping.

background-size: is often combined with background-position: center;, which centers the image in the viewport; and with background-repeat: no-repeat;, which ensures a once-only display.

This example produces a centered, full-screen image:

Copy to clipboard
body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

Responsive Image Sizes

Responsive images resize themselves in real time to suit the user’s 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.

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: How to Create Images for Responsive Web Design

Additionally, you can add basic responsiveness by simply specifying a maximum height or width for the image and setting the other property to auto. Feel free to specify the width value in percentages or viewport widths.

The following example displays the image at 70 percent of the viewport width:

Copy to clipboard
img {
  max-width: 70vw;
  height: auto;
}

For more details, see our articles on CSS resizing and JavaScript resizing.

Image Transformations

With the transform property, you can apply a two-dimensional (2D) or three-dimensional (3D) effect to images. transform 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.

The transform property is fairly new, not fully supported by older browsers. To ensure that transform works there, prefix the property with -webkit-, -moz-, and -ms-, as in the example below, which shows a transformation that rotates and skews an image.

Copy to clipboard
img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}

Creating Hover With CSS

With CSS, you can also create dynamic effects, a common one of which is hover. 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.

Warning: Hover pseudo classes can cause bugs on mobile browsers like Chromium.

The following code causes the image example.jpg to assume full size when hovered over:

Copy to clipboard
<img class=’hover_effect’ src=’example.jpg’/>

.hover_effect {
  height:25%;
  width: auto; 
}

.hover_effect:hover {
  height: 100%;
  width: auto;
}

You can change any other element on your page in the same way. For example, this code changes the opacity of an image:

Copy to clipboard
img {
  width:1900px;
  height:1900px;
  opacity: 1;
}

img:hover {
  opacity: 0.2;
}

Creating Animated Effects With CSS

Animation, which adds sprightliness to images, can make them interactive while leveraging the effects described above plus others. You can style images with animation in one of two ways, as described below.

Switch Between Two Images on Hover

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.

Copy to clipboard
<div id="fade_out">
  <img class="bottom" src="/images/image1.jpg" />
  <img class="top" src="/images/image2.jpg" />
</div>

#fade_out {
  position:relative;
  height:100%;
  width:auto;
  margin:0 auto;
}

#fade_out img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

#fade_out img.top:hover {
  opacity:0;
}

Switch Between Two Images on a Timer

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.

The code below creates an animation that swaps between two selected images. The top part defines the keyframe’s animation pattern.

Copy to clipboard
<div id="fading">
<img class="bottom" src="banner55.jpg" />
<img class="top" src="banner02.jpg" />
</div>

  @keyframes FadeInOut {
  0% {opacity:1;}
  25% {opacity:.75;}
  50% {opacity:.5;}
  100% {opacity:0;}
}

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:

Copy to clipboard
#fading img {
position:absolute;
left:0;
}

For Chrome, Mozilla, or Safari:

Copy to clipboard
#fading img.top {
-webkit-animation-name: FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}

For Internet Explorer:

Copy to clipboard
#fading img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

Creating Image Effects Dynamically With Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. 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.

Additionally, you can transform images programmatically with SDKs 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—a huge convenience and time saver.

The subsections below describe how to apply a few cool effects to images with Cloudinary—beyond what you can do with regular CSS image filters. Each of the subsections links to a Cloudinary Cookbook page with more details.

Video Thumbnails

With Cloudinary, you can easily create thumbnails for video content 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.

One way to create a thumbnail is by adding to the end of the video URL the video site name (vimeo) and the video ID (39482584), followed by the image format (.jpg or .png). For example:

Ruby:
Copy to clipboard
cl_image_tag("39482584.jpg", :type=>"vimeo")
PHP:
Copy to clipboard
cl_image_tag("39482584.jpg", array("type"=>"vimeo"))
Python:
Copy to clipboard
CloudinaryImage("39482584.jpg").image(type="vimeo")
Node.js:
Copy to clipboard
cloudinary.image("39482584.jpg", {type: "vimeo"})
Java:
Copy to clipboard
cloudinary.url().type("vimeo").imageTag("39482584.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('39482584.jpg', {type: "vimeo"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("39482584.jpg", {type: "vimeo"})
React:
Copy to clipboard
<Image publicId="39482584.jpg" type="vimeo">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="39482584.jpg" type="vimeo">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="39482584.jpg" type="vimeo">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Type("vimeo").BuildImageTag("39482584.jpg")
Android:
Copy to clipboard
MediaManager.get().url().type("vimeo").generate("39482584.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "vimeo").generate("39482584.jpg")!, cloudinary: cloudinary)
video thumbnail

You can also stack effects to customize the thumbnail. For example, add smart cropping (c_thumb) with a focus on the face (g_face) and filter effects (e_saturation:-70), like this:

Ruby:
Copy to clipboard
cl_image_tag("39482584.png", :gravity=>"face", :width=>200, :height=>220, :radius=>20, :effect=>"saturation:-70", :crop=>"thumb", :type=>"vimeo")
PHP:
Copy to clipboard
cl_image_tag("39482584.png", array("gravity"=>"face", "width"=>200, "height"=>220, "radius"=>20, "effect"=>"saturation:-70", "crop"=>"thumb", "type"=>"vimeo"))
Python:
Copy to clipboard
CloudinaryImage("39482584.png").image(gravity="face", width=200, height=220, radius=20, effect="saturation:-70", crop="thumb", type="vimeo")
Node.js:
Copy to clipboard
cloudinary.image("39482584.png", {gravity: "face", width: 200, height: 220, radius: 20, effect: "saturation:-70", crop: "thumb", type: "vimeo"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").width(200).height(220).radius(20).effect("saturation:-70").crop("thumb")).type("vimeo").imageTag("39482584.png");
JS:
Copy to clipboard
cloudinary.imageTag('39482584.png', {gravity: "face", width: 200, height: 220, radius: 20, effect: "saturation:-70", crop: "thumb", type: "vimeo"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("39482584.png", {gravity: "face", width: 200, height: 220, radius: 20, effect: "saturation:-70", crop: "thumb", type: "vimeo"})
React:
Copy to clipboard
<Image publicId="39482584.png" type="vimeo">
  <Transformation gravity="face" width="200" height="220" radius="20" effect="saturation:-70" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="39482584.png" type="vimeo">
  <cld-transformation gravity="face" width="200" height="220" radius="20" effect="saturation:-70" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="39482584.png" type="vimeo">
  <cl-transformation gravity="face" width="200" height="220" radius="20" effect="saturation:-70" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(200).Height(220).Radius(20).Effect("saturation:-70").Crop("thumb")).Type("vimeo").BuildImageTag("39482584.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").width(200).height(220).radius(20).effect("saturation:-70").crop("thumb")).type("vimeo").generate("39482584.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "vimeo").setTransformation(CLDTransformation().setGravity("face").setWidth(200).setHeight(220).setRadius(20).setEffect("saturation:-70").setCrop("thumb")).generate("39482584.png")!, cloudinary: cloudinary)
saturation

Content-Aware Padding

By applying content-aware padding with the b_auto 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. For example:

border b_auto:border predominant b_auto:predominant border_contrast b_auto:border_contrast predominant_contrast b_auto:predominant_contrast

As an enhancement, specify the gradient_type, number, and direction properties.

For example:

predominant predominant_gradient:2:diagonal_desc border_contrast predominant_gradient_contrast:4

Product Galleries

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 JavaScript widget called galleryWidget, which you can add to your pages in a snap.

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.

galleryWidget 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.

Animated Image Compilations

You can easily create animated images or videos through Cloudinary’s multi method by combining images into a single item. Identify the images in question with a tag that you specify.

Here’s what to do:

  1. Programmatically define the tag that you want to target.

    Once the definition executes, Cloudinary returns a response with the new image’s URL.

  2. Add the URL to your site content to display the image.

    This code example, written in Node.js, creates an animated GIF:

    Copy to clipboard
    cloudinary.v2.uploader.multi('logo',
    function(error,result) {console.log(result, error) });

Here’s the response:

Copy to clipboard
{
  "url": "http://res.cloudinary.com/demo/image/multi/v1473690796/logo.gif",
  "secure_url": "https://res.cloudinary.com/demo/image/multi/v1473690796/logo.gif",
  "public_id": "logo",
  "version": 1473690796
}

The animated GIF looks like this:

Ruby:
Copy to clipboard
cl_image_tag("logo.gif", :type=>"multi")
PHP:
Copy to clipboard
cl_image_tag("logo.gif", array("type"=>"multi"))
Python:
Copy to clipboard
CloudinaryImage("logo.gif").image(type="multi")
Node.js:
Copy to clipboard
cloudinary.image("logo.gif", {type: "multi"})
Java:
Copy to clipboard
cloudinary.url().type("multi").imageTag("logo.gif");
JS:
Copy to clipboard
cloudinary.imageTag('logo.gif', {type: "multi"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("logo.gif", {type: "multi"})
React:
Copy to clipboard
<Image publicId="logo.gif" type="multi">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="logo.gif" type="multi">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="logo.gif" type="multi">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Type("multi").BuildImageTag("logo.gif")
Android:
Copy to clipboard
MediaManager.get().url().type("multi").generate("logo.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "multi").generate("logo.gif")!, cloudinary: cloudinary)
gif

Learning More About Cloudinary

Besides the capability for creating image effects, Cloudinary offers a multitude of robust tools for web developers, including the following:

  • Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
  • Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
  • Seamless asset management. 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.
  • Effective image manipulation. You can manipulate, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
  • Automated image optimization. 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.
  • Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
  • Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.

Do give Cloudinary a try. To start, sign up for a free account.

Check Out the Details of CSS Images

Want to learn more about CSS images? These articles are an excellent resource:

Recent Blog Posts

Global Study Strengthens Case for Brands to Support UGC

However, along with the benefits of user-generated content (UGC), comes myriad technical challenges. Content must be moderated to avoid compromising your brand. You need to provide a user-friendly process to efficiently manage content uploads. You need to transform images and videos to ensure brand consistency and web performance. You also need to ensure they look presentable across all devices and browser environments. To help brands address these issues and more, we recently ran a three-part blog series on UGC.

Read more
Cloudinary Supports JPEG XL

Since its founding, Cloudinary's mission has been to help companies unleash the full potential of their media to create the most engaging visual experiences. In keeping with that quest, we support new codecs for images and videos as soon as possible.

Read more
WingTai Asia Fashions Efficient Media Management Workflow

WingTai Asia, a subsidiary of Wing Tai Holdings Limited, is an investment holding company that focuses on property investment and development, lifestyle retail, and hospitality management in key Asian markets. The company is a licensed distributor or sole license distributor for many brands, including Adidas, Cath Kidson, TopShop and UNIQLO, and operates brick and mortar shops to sell these goods throughout Singapore and Malaysia.

Read more