In this guide i want to show you how easily you can add nice hover effect to your images. With this effect your images will be gray and when someone will hover mouse over it - images will be colored to original colors. This guide contains only one simple thing - modification of css styles. In fact, we will not modify any original styles definition, we will add new code to main stylesheet file. This guide will work in PrestaShop 1.6, 1.5, 1.4

 Hover effect example

Global.css stylesheet styles

Open file located in your theme directory: themes/YOUR_THEME/css/global.css and and the end of this file paste this code:

    img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix
    type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }img:hover
    { filter: none; -webkit-filter: grayscale(0%); }

And thats all, now all images in your store will be grayed, and when someone will hover mouse over it - image will be colored.