Image Greyscale with CSS & Re-Color on Mouse-Over

img.grayscale {  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+, IE10 */  filter: gray;  /* IE6-9 */  -webkit-filter: grayscale(100%);  /* Chrome 19+ & Safari 6+ */  -webkit-transition: all .6s ease;  /* Fade to color for Chrome and Safari */  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */}
img.grayscale:hover {  filter: none;  -webkit-filter: grayscale(0%);}
svg {  background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);}
svg image {  transition: all .6s ease;}
svg image:hover {  opacity: 0;}

<p>Firefox, Chrome, Safari, IE6-9</p><img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400"><p>IE10 with inline SVG</p><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">  <defs>     <filter id="filtersPicture">       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />    </filter>  </defs>  <image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />   </svg>

Image Greyscale with CSS & re-color on mouse-over social icons?

:hover does not take any arguments, i.e. you cannot place selectors in parentheses after :hover.

Your rule should look like this:

.single .nc_socialPanel:not(.nc_floater):not(.nc_socialPanelSide):hover{
    filter:grayscale(0%);
}

Change image from grayscale to color with other hover effects

In your custom css adding folowing style to bring back colors on hover:

#team .ult-new-ib:hover img {
  filter: none !important;
}

So we are remove filter from the image on parent div hover which is applying that filter to greyscale.

how to make smooth grayscale on hover using CSS

Try do it this way:

 img.tt-logo {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img.tt-logo:hover {
   -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

Image greyscale on hover + p visible only on hover

Simple, put both elements in the same container. For example,

.grid:hover img {
  filter: url(filters.svg#grayscale);
}

.grid:hover .desc span {
  opacity: 1;
}

HTML with Javascript - Apply grayscale to images in a table, then mouseover images to go back to colored version

1. An id attribute must be unique.
2. Don't clutter the HTML more than necessary. It should be really easy to read.
3. Use addEventListener instead of onmouseover.
4. Method names are usually written with kebabCase (see the new method I added).
5. Don't repeat code. Instead, refactor similar code into a new method.

let table = document.getElementById('greyscaleTable')

table.addEventListener('mouseover', remove_grayscale);
table.addEventListener('mouseout', image_grayscale);

function image_grayscale(event) {
  let element = event.target;
  changeGrayscale('100%', element);
}

function remove_grayscale(event) {
  let element = event.target;
  changeGrayscale('0%', element);
}

function changeGrayscale(amount, element) {
  let isGrayscaleImage = element.classList.contains('grayscale');
  
  if (isGrayscaleImage) {
    element.style.filter = `grayscale(${amount})`;  
  }
}

#greyscaleTable img {
  width: 100px;
  height: 100px;
}

<div id="greyscaleTable" class="table">
  <table border="3" align=center width="600" height="200">
    <tr>
      <td>
        <img class="grayscale" style="filter: grayscale(100%)"  src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>
    </tr>
  </table>

body {  width: 100%;  margin: 0;}.container {  display: flex;  justify-content: center;  width: 100%;  font-size: 100px;}.item {  display: flex;  justify-content: center;   flex: 1;}i {  display: flex;  justify-content: center;  color: red;}.container:hover i {  filter: grayscale(100%);}.item:hover i {  filter: grayscale(0%);}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="container">  <div class="item"><i class="fa fa-picture-o"></i></div>  <div class="item"><i class="fa fa-picture-o"></i></div>  <div class="item"><i class="fa fa-picture-o"></i></div></div>