Source: styleguide/styleguide.less, line 315

6.1 #permalink Hero section

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A full-width element with an image, a title, and a subtitle suitable for the top of pages. The image itself is set by the accompanying javascript call so as not to pollute the css file (it also lets us do a bit of responsive optimization)

Example
Markup
 <div class="hero img-overlay">
  <div class="hero-text layout_centerBoth">
   <h1 class="hero-title ruleBottom col_whiteText text_allCaps"><a class="col_inherit" href="/aboutus">About Us</a></h1>
  </div>
 </div>
<script type="text/javascript">
   deferred.push(["gg.img.loadBg","hero","/img/banners/hero_join","jpg"]);
</script>
Source: modules/06_images/hero.less, line 5
Example
Our team loves cereal
Markup
<div class="grid-3">
 <img class="img-cover" src="/img/banners/photoBlock4.jpg" alt="Our team loves cereal"/>
</div>
Source: modules/06_images/image.less, line 3

6.2.2 #permalink Overlay

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Put a dark overlay over an image. If this div's parent is an a, the overlay will be lightened on hover.

Example
Markup
<a href="#" class="grid-3">
 <div class="img-overlay">
  <img class=" img-cover" src="/img/banners/photoBlock4.jpg" alt="Our team loves cereal"/>
 </div>
</a>
Source: modules/06_images/image.less, line 45
Example
Then you can put some text over your image! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Learn More
Markup
<div class="grid-6 layout_center">
  <div class="img-bg layout_centerVertical js-map">
    <span>Then you can put some text over your image! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
    <br/><br/>
    <a class="btn btn_ggPrimary2" href="/aboutus">Learn More</a>
  </div>
</div>
<script type="text/javascript">
  deferred.push(["gg.img.loadBg","js-map","/img/maps/pixel_map","png"]);
</script>
Source: modules/06_images/image.less, line 89
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 115