Source:
styleguide/styleguide.less
, line 340
6.1 #permalink Hero section
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
6.2.1 #permalink Cover
Cover an entire div with an image
Example
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
Put a dark overlay over an image. If this div's parent is an a
, the overlay will be lightened on hover.
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
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
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
"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