Add Color Animation Effects to Images With CSS3 Filters 

Creating effects with css is increasingly prevalent nowadays, by using CSS filters we can create effects that we usually find in Photoshop, even effects like Instagram we can create with CSS3 capabilities. This CSS filter is relatively new, and is still rarely used.

css3 filter effects

In this tutorial we will try to create an effect with CSS Filters combined with CSS Animation so that it will produce an interesting image color transition effect. Unfortunately, it only supports webkit browsers like Google Chrome or Safari.

Usage: This effect can be used to beautify the Header, Images on the gallery website, and more.

Related article:

Creating Black and White Images With CSS Filters
Creating Instagram Effects with CSS3 Filters
Let’s just start by creating an html file.

HTML
In this paper I only show one div, although in the demo there will be many divs because to enhance the appearance of the demo, but basically there is only one div that has an effect.

Indonesian Web Design Tutorial

What you need to pay attention to there is only giving column1 class, because that column will be effected with css.

CSS
To give effect to the div containing the image, we give the effect using the following css

.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: ‘Hammersmith One’, sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margins: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}

/* Animations */
@-webkit-keyframes pulse {
0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{

/* -webkit-filter: / / contrast(200%) / / brightness(25%) / / invert(100%) / / hue-rotate(110deg) / / grayscale(100%) / / sepia(100%) / / blur(10px); */

/* The above effects can be selected */

/* -webkit-transition: -webkit-filter 1s; / -webkit-animation: pulse 3s alternate infinite /mover 5s alternate infinite*/;

}
.column1:hover { -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%) /* blur(2px) */; }
you can see there we only use contrast and grayscale effects, for other effects you can use such as invert, sepia, blur, etc.

Demo

For those of you who can’t wait to see the results that have been made, click the demo link below or download the code from github.

So, hopefully useful for those of you who are studying CSS3.

Greetings Indonesian web design