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
- Want to Learn More About CSS Images?
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:
/* 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:
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:
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:
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.
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:
<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:
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.
<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.
<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:
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;
}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:
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:
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:
b_auto:border
b_auto:predominant
b_auto:border_contrast
b_auto:predominant_contrast
As an enhancement, specify the gradient_type, number, and direction properties.
For example:
predominant_gradient:2:diagonal_desc
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:
Programmatically define the tag that you want to target.
Once the definition executes, Cloudinary returns a response with the new image’s URL.
Add the URL to your site content to display the image.
This code example, written in Node.js, creates an animated GIF:
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:
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:
- 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
