6.2.4 #permalink Greyscale

Toggle example guides Toggle HTML markup

"grey out" an image until hover (or hover can be ignored)

Examples
Default styling

Base Image

Grayscale

Grayscale without hover

:hover
hovered

Base Image

Grayscale

Grayscale without hover

Markup 
 <div class="grid-parent">
   <div class="grid-4 box_horizontalPadded4">
      <h3>Base Image</h3>
      <img class="img-cover [modifier class]" src="/img/logos/companies/lilly.png"/>
   </div>
   <div class="grid-4 box_horizontalPadded4">
      <h3>Grayscale</h3>
      <img class="img-cover img-grayscale [modifier class]" src="/img/logos/companies/lilly.png"/>
   </div>
   <div class="grid-4 box_horizontalPadded4">
      <h3>Grayscale without hover</h3>
      <img class="img-cover img-grayscaleHoverIgnored [modifier class]" src="/img/logos/companies/lilly.png"/>
   </div>
 </div>
Source: modules/06_images/image.less, line 118