JSFiddle - React, Tailwind, and code Playground

by Jefferson Alison Alves

HTML

<ul class="parceiros">
    <li>
        <a href="#">
            <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt="">
        </a>
    </li>
</ul>

CSS

.parceiros li a img{ 
  border: 1px solid black;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

.parceiros li a img:hover { 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}