In my prevoius article, i have wrote how to set darkening effect for an image with CSS,JavaScript,Or jQuery.
Here i demonstrate how to set image effects only with CSS.
To see the effects in action, hover on each images below.you can see colors changing in the image. Here Is the CSS

<style>
.wrap {
    overflow: auto;
}
.bg {overflow: hidden;float: left;}
.bg2{background:red;}
.bg3{background:green;}
.bg4{background:purple;}
.bg5{background:yellow;}
.bg6{background:hotpink;}
.bg7{background:#ccc;}
.bg img {
    float: left;
    background: black;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }
  .bg img:hover {
    opacity: .5;
    cursor: pointer;
  }
</style>

In this CSS, We are assigning 7 classes ,each class has its own background color property set. And a wrapper class to wrap the images. And we assign a class named "bg" where we make the float property set to avoid problem with positioning. Now Have a look at Html code

<div class="wrap">
<div class="bg bg2">
<img alt="" class="t2" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
  </div>
<div class="bg bg3">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
        </div>
<div class="bg bg4">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
            </div>
<div class="bg bg5">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
                </div>
<div class="bg bg6">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
                    </div>
<div class="bg bg7">
<img alt="" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</div>
</div>