CSS Image Effects: Five 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
• Creating hover with CSS
• Creating animated effects with CSS
• Creating image effects dynamically with Cloudinary
  • Video thumbnails
  • Content-aware padding
  • Product galleries
  • Animated image compilations
• Want to Learn More About CSS Images?

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

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:

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

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

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:

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 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:

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

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:

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

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

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.

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 /
}

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:

<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:

img {
  width:1900px;
  height:1900px;
  opacity: 1;
}

img:hover {
  opacity: 0.2;
}

To animate an element using CSS, it’s important to understand its basic structure. For a successful CSS animation, you require:

• An HTML element you want to animate.
• A specific CSS rule that ties the animation to that element.
• A set of keyframes that decide the initial and final styles for the animation.

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

For those wanting to delve into more advanced CSS animation sequences:

1. Begin by styling the element you want to animate using the animation property or its associated sub-properties.
2. Configure the specifics such as timing, duration, and other nuances of how the animation sequence should evolve over time.

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

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.

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.

<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;
}

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.

<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:

#fading img {
position:absolute;
left:0;
}

For Chrome, Mozilla, or Safari:

#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:

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

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.

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:

Loading code examples

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:

Loading code examples

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:

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

For example:

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.

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.

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.

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.

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.

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.

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:

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

Here’s the response:

{
  "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:

Loading code examples

While 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’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’s not just about crafting the animation, but also about ensuring its smooth and consistent performance across different browsers and devices.

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.

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

• Working With CSS Images
• CSS Image Overlay: Overlaying Text and Images for Visual Effect
• Image Resizing: Manually With CSS and Automatically With Cloudinary
• CSS Image Effects: Five Simple Examples and a Quick Animation Guide
• Creating Image-Filter Effects With CSS and Riveting Transformations
• Rotating Images in JavaScript: Three Quick Tutorials
• Cool Tricks for Resizing Images in JavaScript