Hue Rotate Image Hover Effect with CSS Filter Property

Looking to add a splash of dynamic color to your web elements? This Hue Rotate Image Hover Effect using HTML and CSS is a beautiful and lightweight solution to create vibrant image animations on hover. Perfect for galleries, cards, portfolio thumbnails or interactive sections of your website.

HTML Structure

We’ll start with the basic HTML structure. This consists of a .container that centers everything and an .img div that displays the image via background CSS.

<div class="container">
    <div class="img"></div>
</div>

The .img div acts as the image wrapper and is styled using CSS. It avoids using <img> tags to allow background-image manipulation and adds hover animation via pure CSS.

Image Hover Effect with CSS

The magic of this hue-rotate animation happens entirely in CSS. It uses Flexbox to center the image and a keyframe animation to cycle colors on hover.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width:350px;
}

.img {
    width: 300px;
    height: 180px;
    background: url('https://i.ibb.co/BcbW7PY/img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border-radius: 10px;
}

.img:hover {
    animation: imageAnimation 1.5s linear infinite alternate;
}

@keyframes imageAnimation {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}

• .container centers the image vertically and horizontally using Flexbox.
• .img sets the image background, size and shape.
• On hover, the hue-rotate() filter cycles through the color spectrum with a smooth animation.
• The infinite alternate makes the effect bounce back and forth for a seamless loop.

This CSS-only solution avoids JavaScript entirely, ensuring fast performance and clean code for Image Hover Effect.

This hover-based image color animation adds modern interactivity to static visuals. It’s ideal for showcasing featured posts, product cards, banners or call-to-action blocks. Because it’s CSS-only, it’s lightweight, responsive and works across all modern browsers.

You can easily extend this effect by combining it with scale(), brightness() or even grayscale() for more dramatic image transformations.

Live Preview