Css style

Get started with CSS image effects

Cascading Style Sheets (CSS) is a scripting language that allows web developers to specify the layout and design of website elements. It is commonly used in combination with HTML, XHTML and JavaScript.

In this article, I’ll show how CSS can be used to manipulate and style images. I will cover some simple CSS image effects which can help you present images attractively on a web page, along with dynamic effects such as fade, zoom in and out, and apply 3D border.

How to apply grayscale in CSS?

Here is an example showing how to apply grayscale to an image in CSS:

picture {

width: 150 pixels;


.shades of grey {

filter: grayscale (0.5)

The most common filter added to an image is grayscale. You can use it to create black and white photos from original color photos. The CSS grayscale function can take a percentage or a numeric parameter. 0 (or 0%) means no change and 1 (or 100%) means the image is completely grayscale. Leaving the value blank will set the parameter to 1.

How to blur in CSS?

Here is an example showing how to apply a blur to an image in CSS:

picture {

width: 150 pixels;


. to fall out {

filter: blur (5px);


The blur effect blurs the photo by applying a Gaussian blur effect. It can be used, for example, for a background image that does not need to be sharp, for censoring or for a graphic effect in an image with several visual layers.

The CSS blur() method takes one argument, which specifies a number of pixels. The larger the value, the greater the blur. By default, the value is 0.

How to apply hue rotation in CSS?

Here is an example of applying Hue rotation in CSS:

img { width: 150px; }

.huerotate {

filter: hue rotation (180 degrees);


Tint Rotation is a function that specifies an angle around the CMYK color circle and tints the image with that color. For example, a value of 90 degrees will result in light green, while 180 degrees as in the example above will shade the image in cyan.

How do image hover effects work in CSS?

You can use CSS to define text styles, but you can also add style layers to text and images. This is called a hover effect. In other words, something happens, defined by the CSS code, when you hover your mouse over a specific set of text or images.

Change background color

An easy way to add a hover effect is to change the background color. If you add the :hover directive to a CSS class and specify a different background color, it will change to that color when the user hovers their mouse over it.

a: hover {

background color: red;


Change text formatting

Another hover effect is to add underlined or bold text. The example below shows how to add underline and bold to a text string on hover.

a: hover {

font-weight: bold;

text decoration: underline;


Changing the font and size

You can change the font of text on the page or a link on hover. Another option is to increase or decrease the font size with a font size modifier.

a: hover {

font family: Georgia;

font size: 200%;



Crossfading is a great way to focus on a part of a page that emphasizes a user function or calls to action. You create a fade effect in CSS in two steps. First, set the initial state, then set the change to be made on hover.



opacity: 0.2;


.fade: rollover


opacity: 1;


Rotate an element

Another option is to rotate an element when the user hovers their mouse over it. To do this, give your div a “rotation” class as follows. There are several options to support different browsers.

.rotate: hover


-webkit-transform: rotateZ(-20deg);

-ms-transform: rotateZ(-20deg);

transform: rotateZ (-20 degrees);


Expand or collapse an element

If you want to expand or shrink an element when the user hovers over it, use CSS3 to set the class of the div to expand and add the following code to the style block. You can do the same with a value less than 1 to shrink the item.

.grow: hover


-webkit-transform: scale (1.5);

– ms transformation: scale (1.5);

transform: scale (1.5);


3D Shadow

You can achieve a cool 3D shadow effect by creating a colored shadow and applying a transform that moves it horizontally using the translate property.

.threed: hover


shadow box:

1px 1px #53a7ea,

2px 2px #53a7ea,

-webkit-transform: translateX(-4px);

transform: translateX(-4px);



In this article, I showed how easy it is to style and manipulate images using CSS. With just a few lines of code, you can apply cool effects such as:

  • Applying grayscale to color images
  • Blur an image
  • Performing hue rotation (selecting a hue from the color wheel)
  • Apply an effect when the user hovers their mouse over an image:
    • Background color
    • Text formatting
    • Font and size
    • Disappear
    • Zoom in/out
    • 3D Shadow

Hope this helps you build better, visually captivating web designs and website features.