6 #permalink Images

Source: styleguide/styleguide.less, line 340

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

About Us

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

6.2 #permalink 6.2

6.2.1 #permalink Cover

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

Cover an entire div with an image

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
Our team loves cereal
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 48

6.2.3 #permalink Background image

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

Put an image in the element's background. Use with gg.img.loadBg.

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 92

6.2.4 #permalink Greyscale

Toggle full screen Open in new window 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