How to Add Visual Effects to Images using CSS?

Last Updated : 28 May, 2024

CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visual effects of images using CSS.

These are the following methods:

Table of Content

Applying CSS Filter Effects
Applying CSS Transform and Transition Effects

Applying CSS Filter Effects

We have applied the filter property in CSS to create visual effects on the image, such as grayscale, blur, and brightness, which activate on hover.

Example: The below example uses CSS Filter Effects to add visual effects to images using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        h1 {
            color: green;
        }

        .image-container img {
            width: 300px;
            transition: 0.5s;
        }

        .image-container img:hover {
            filter: grayscale(100%) blur(2px) brightness(1.2);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Applying CSS Filter Effects</h3>
    <div class="image-container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240305215328/gfglogo.png"
            alt="GeeksforGeeks Logo">
    </div>
</body>

</html>

Output:

Applying CSS Transform and Transition Effects

We have applied the transform property in CSS to scale and rotate the image on hover, combined with the transition property to ensure smooth animations.

Example: The below example uses CSS Transform and Transition effects to add visual effects to images using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        h1 {
            color: green;
        }

        .image-container img {
            width: 300px;
            transition: transform 0.5s;
        }

        .image-container img:hover {
            transform: scale(1.2) rotate(10deg);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Applying CSS Transform and Transition Effects</h3>
    <div class="image-container">
        <img src="
https://media.geeksforgeeks.org/wp-content/uploads/20240305215328/gfglogo.png"
            alt="GeeksforGeeks Logo">
    </div>
</body>

</html>

Output:

How to Change Close Button Color in Bootstrap 5?

anjalibo6rb0

Improve

Article Tags :

How to Add Visual Effects to Images using CSS?

Applying CSS Filter Effects

Applying CSS Transform and Transition Effects

Similar Reads

Thank You!

What kind of Experience do you want to share?