Creating cool CSS image effects &

animations the easy way

Learn to create key CSS image effects with simple techniques. Read on to know
ImageKit's advantage over CSS to achieve the same image effects.

When building an image-heavy website, like an e-commerce portal or a travel

website, images serve a crucial role in narrating the story. Rich graphics help
users in exploring content with ease. One of the tools designers use to create
engaging visuals is adding effects like changing the image to grayscale,
rounding the corners, etc.

But manual graphic editing tools don't work when we have to do this for
hundreds of thousands of images. In that case, web developers use CSS to
serve cool image effects without any significant dependency on graphic
designers.

This article will lay out some of the commonly used CSS image effects that
will help you create a unique visual experience for your users. With several
examples, you'll learn how to apply effects and animation to photos using
CSS techniques; they are as follows:

1. Image filter effects like grayscale and blur

2. Image shadow effect
3. Image rounded corners
4. Image rotation with CSS transform
5. Image thumbnails
We will use the following image to demonstrate various image effects and
animations in this article. The image is stored in imagekit.io and can be
accessed through this URL.
Photo by Quintin Gellar from Pexels - stored and delivered via ImageKit
You can use the above URL or create your ImageKit account and upload an
image to the Media Library by signing up here.

Now that we have an image to work with let's use it in an HTML document,
as shown below. And don't forget to replace the image src with your unique
ImageKit URL or any other image source.
<img src="image/new-york_lbAbZZKZG.jpg" alt="new york">

With the image set and ready, let's get started.

Image Filter Effect

The first image effect is the filter effect. The CSS filter property is one of the
most popular ways of adding effects to images or any HTML elements. It
allows us to use several functions to apply graphical effects like blur,
saturation, or color shift to an element.
This section will teach you how to implement the grayscale() function effect
and the filter blur() function effect using CSS.
1. Image Grayscale Effect
The grayscale() function is used to convert an image to grayscale, taking a
number (percentage) as input which determines the intensity of the
conversion.
A value of 100% will result in a completely grayscale image (black and white),
while a value of 0% has no impact on the image colors.
The CSS sample below shows how the grayscale() filter can be applied to an
image.

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

The resulting image is shown below.

The sample image with a grayscale filter value of 100%

Go ahead and adjust the percentage value of the grayscale() function above to
get your desired black and white image effect.
2. Image Blur Effect
The blur() function uses the Gaussian function in mathematics to blur an
image.
Blurring an image is useful for adding text over an image overlay, as it
increases the visibility of the text on the image. It can also be used to render
low-quality images while lazy load the original image. This is a technique
used by websites like Medium to load high-resolution graphics.

The unit of the blur() function can be any of px (pixels), rem (relative to the
root font size of HTML document), em (relative to the font size of the parent
element), or percentage (%), depending on your choice.
Here is the CSS for the blurred image effect.

img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}

The resulting image is shown below.

Image with blur filter effect
We have also created an example with a button overlaid on top of a blurred
image using HTML and CSS. You can check it out on CodePen here.
There are a lot of other CSS filter effects that allow you to modify the color
tone, brightness, saturation, contrast, etc. You can find a comprehensive list
of CSS filters and how to use them on MDN.
Image Shadow Effect

As the name suggests, the image shadow effect allows us to draw a shadow
around an HTML element using the box-shadow property. A box-shadow is
described by X and Y offsets relative to the element, blur and spread radius,
and color.
In the example below, we have created a card from our sample image and
added a shadow to it using the box-shadow property. In the CSS snippet below,
see the box-shadow property added for the class card for the values of x and y
offsets, blur, spread, and shadow color.
HTML to create a card:
<div class="card">
<img src="image/new-york_lbAbZZKZG.jpg" alt="new york" />
<div class="card-info">
New York is a city in the United States of America.
</div>
</div>

CSS to add shadow to the card:

.card {
width: 550px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
}
.card img {
width: 100%;
}
.card-info {
padding: 10px;
font-weight: 500;
}

The final result of the above is a beautiful card with shadows that make it
look slightly raised compared to the rest of the page.
Image Rounded Corners
Rounding the corners of images and, in general, HTML elements is another
popular effect used on the web. Some use cases of rounded corner effects are
profile images, content cards, and buttons.

Rounded corners can be achieved using the CSS border-radius property,

which allows you to specify four different values for the radius on the top-
left, top-right, bottom-right, and bottom-left corners, respectively.

border-radius: 15px 15px 15px 15px;

Since in the above example, the four corners have the same values, the border-
radius property can be rewritten using the CSS shorthand method, as shown
below.
border-radius: 15px;

This shorthand method applies a radius of 15px to all four corners of the
image.
The values of each individual corner radius can be specified using their
dedicated CSS properties as well.

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
/* shorthand */
border-radius: 10px 20px 30px 40px;

You can use any CSS units such as the px, rem, em, or percentage (%) to
specify the radius.
To create a rounded corner image, let's apply a radius of 50px to our image
using the shorthand method as shown below.

img{
border-radius: 50px;
}
Image Rotation with CSS Transform

In this section, we will see how to rotate an image using the

CSS transform property and then extend it to turn it into an animation.
The CSS transform property is very versatile and can be used to
apply transformations such as rotate, scale, skew, etc. to an HTML element.
Using the CSS given below, we can rotate the image clockwise by 25 degrees.

img {
width: 300px;
transform: rotate(25deg); /* rotate the image in 25 degrees */
}
The transform rotate property can also take a negative value to rotate the
image in an anti-clockwise direction, as shown below:

img {
transform: rotate(-25deg); /* rotate the image in -25 degress */
}

Creating a vibration animation with CSS transform effect

We will now use these clockwise and anti-clockwise rotations using the
CSS transform property to create a vibration effect when we hover on the
image.
To create an animation, we need to use CSS Keyframes. Keyframes allow us
to define the state of an element during an animation. In the example below,
we have used small rotations at fixed intervals of 10% of the animation
duration. vibrate is the name we have assigned to the keyframe here.
@keyframes vibrate {
0% { transform: rotate(0deg); }
10% { transform: rotate(-1deg); }
20% { transform: rotate(1deg); }
30% { transform: rotate(0deg); }
40% { transform: rotate(1deg); }
50% { transform: rotate(-1deg); }
60% { transform: rotate(0deg); }
70% { transform: rotate(-1deg); }
80% { transform: rotate(1deg); }
90% { transform: rotate(0deg); }
100% { transform: rotate(-1deg); }
}
We can now apply the vibrate keyframe to our image on hover as shown
below. The infinite value of animation-iteration-count results in the animation
going on forever.

img:hover {
/* Start the vibrate animation with duration 0.5 seconds */
animation: vibrate 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}

Hover on the image below to see it vibrate!

You can create your own animations by combining keyframes and

the transform property in CSS to create really cool effects.
Image Thumbnails
An image thumbnail is a low-resolution version of a larger, higher resolution
image. You would often see e-commerce companies using image thumbnails
on their search or listing pages, which redirect to the product detail page with
high-resolution images.
While ideally, an image thumbnail should load a pre-resized, low-resolution
image, something that we cover in the next section, we can also use CSS to
scale down a high-resolution image in the browser.

To achieve this, we use the width or height property in CSS as shown below.

img {
width: 300px; /* set a small width */
}

The above CSS results in 300px wide image thumbnail.

Note that we are still loading a large image, and only downscaling it in the
browser, which is not ideal for quick page load time or lower page size. Let's
look at how ImageKit can be used to solve this problem and also recreate the
CSS image effects with it.

Creating Cool CSS Image Effects with ImageKit

ImageKit.io is a complete media management and delivery service that offers

real-time intelligent image optimization, image resizing, cropping, and other
transformations.

ImageKit's real-time transformations and optimizations help us deliver

stylized image thumbnails across all platforms. You can also use these images
in emails where extensive CSS is not supported.

This section will demonstrate how to use the ImageKit to achieve some of the
effects implemented with regular CSS above.

Image Grayscale Effect with ImageKit

The image grayscale effect can be achieved easily with ImageKit by adding
the e-grayscale transformation parameter directly in the image URL as shown
below.

image/new-york_lbAbZZKZG.jpg?tr=e-grayscale

Unlike an image converted to grayscale in the browser using CSS, the image
delivered from the image URL above is grayscale by default.
Grayscale image made using ImageKit URL transformations
Easy, right? Another advantage is that when you save or open a grayscale
image created with ImageKit URL in a new tab, it will retain the black and
white effect, unlike the grayscale image made with regular CSS.

Image Blur Effect with ImageKit

The blurred image effect can be achieved with ImageKit by passing the bl-
value transformation parameter in the image URL. The value here represents
how blurry you want the image to be on a scale of 1 to 100.

For example, the URL below gives us a blurred image with the blur set to 7.

image/new-york_lbAbZZKZG.jpg?tr=bl-7
Again, the original image itself here is blurred and we do not need any HTML
or CSS to create this effect.

Image Rounded Corners with ImageKit

A rounded image can be achieved using the r-<value> transformation
parameter in the image URL. It takes in any positive integers as its value. You
can also use r-max to generate a perfectly circular image.
The URL below uses r-max to generate a circular image (downscaled for
representation)

image/new-york_lbAbZZKZG.jpg?tr=r-max
You can replace the max value in the radius transformation in the URL with
any positive integer value to generate an image with the corresponding
rounded corner effect.
Image Rotation with ImageKit
ImageKit allows you to rotate an image directly from the URL at specific
angles. You simply need to pass the rt-value transformation parameter in the
URL. The rotation values allowed are 0, 90, 180, 270, 360, and auto,
representing the degrees the image should rotate.

The value auto automatically orients your image correctly using the EXIF
Orientation in your image metadata.

The URL below rotates the image by 180 degrees.

Image/new-york_lbAbZZKZG.jpg?tr=rt-180

This results in the following image that is rotated without using any CSS.
Image rotated by 180 degrees using ImageKit transformations
Image Thumbnails with ImageKit
When we looked at creating image thumbnails using CSS, we scaled down a
high-resolution image in the browser. This is not ideal as the browser still
needs to load a heavy image which slows down the load time and wastes the
user's bandwidth.

ImageKit's real-time transformations allow us to deliver resized images to the

users. Instead of using CSS to scale down the image, we get the ability to load
a smaller image. This makes our web page lighter and faster.

For example, we can load a 200px wide image by adding the w-

200 transformation parameter to the URL.

image/new-york_lbAbZZKZG.jpg?tr=w-200
Or we can load a 400x300 px image by specifying both width and height
parameters in our URL.

image/new-york_lbAbZZKZG.jpg?tr=w-400,h-300

There are several other resize and cropping options available in ImageKit.
You can read more about these options in this detailed dynamic image
resizing guide.
Conclusion
CSS effects are great for developers. They can save a lot of time and reduce
dependency on graphic design tools for creating cool image effects.

A real-time image transformation tool like ImageKit helps us deliver pre-

stylized or resized images to the users without even writing CSS. Since all
ImageKit transformations are URL-based, they can be done at scale and on
platforms like emails or apps that don't support CSS.

If you want to try ImageKit to create image thumbnails or stylized

images, sign up for the free plan now. It comes with a generous quota of free
bandwidth and storage to use on your website.