how to make smooth grayscale on hover using CSS

Tags: css,css-transitions,grayscale

Problem :

I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working but not smoothly. i am using CSS transition.

This is my code

<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />

   <style> {
      filter: grayscale(1);
      transition: grayscale 0.5s;
    } {
      filter: grayscale(0);

Solution :

Try do it this way: {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 } {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);

and every image has its own alt, you can use it without using img.class:

 img[alt="TT ltd logo"] {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;

 img[alt="TT ltd logo"]:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);

in this case class is extra

    CSS Howto..

    How to create an animated rainbow line using CSS or Javascript?

    Flex 4 How to set background image to VBox?

    3x3 CSS grid: how to make center div the only one with a fixed height/width?

    How to animate an “:after” using CSS or jQuery

    How to convert a css only megamenu to jquery based

    xHTML/CSS: How to make inner div get 100% width - margins

    How can I horizontally align these divs?

    How do I align the list items in an
      with my


    How can I have multiply a pixel width value with LESS Css?

    How to make text input in table cell grow beyond the limits of the table when selected?

    How To create slider/toggle to change font size on screen with HTML CSS JS [closed]

    How to create centered image slideshow behind website content

    How to add a half circle at the bottom middle of my header?

    IE css filter: adding black outline to text - how do I remove it?

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    How to override parent containers width property in CSS [duplicate]

    How to apply css transformations on HTML elements using jQuery?

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    How to start css and html

    How to overlay an image inside an image with HTML, CSS

    How to temporarily modify the CSS of an element

    CSS Layout. Can not get idea how to fix it

    How do I make a dedicated row for javascript alerts?

    How can I align my search button to the right?

    CSS: how to position element in lower right?

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    How to put Facebook and Twitter buttons next to each other?

    How to define SVG gradient in page-global CSS file

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)