Images

Alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Example
										
											
										
									

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Example
								
									
								
							

Captions

Captions can easily be added to any thumbnail with minimal markup. Timber offers two types of captions: caption below and caption over.

Caption Below
This is a simple image caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Example
								
									
Caption here
Caption Over

Captions that overlay thumbnails can be vertically aligned top, center or bottom, and text can be left, center or right aligned. Captions can be styled using a combination of background color/border color, text color and border style classes. Caption content is by default vertically aligned middle and aligned left. Note: Overlay captions require timber.min.js.

IMPORTANT: Overlay captions require that the thumbnail wrapper has a set height. It is therefore important to specify the image width and height on the image tag directly. Javascript is then used to determine the image ratio and scale the thumbnail wrapper accordingly as the browser window is resized.

Example 1
The Himalayas

A default overlay caption that is vertically aligned middle and left aligned.

Example
								
									
Caption Title

Caption

Example 2
The Himalayas

A default overlay caption that is vertically aligned middle and center aligned.

Example
								
									
Caption Title

Caption

Example 3
The Himalayas

A default overlay caption that is vertically aligned middle and right aligned.

Example
								
									
Caption Title

Caption

Example 4
The Himalayas

A default overlay caption that is vertically aligned top and center aligned.

Example
								
									
Caption Title

Caption

Example 5
The Himalayas

A default overlay caption that is vertically aligned top and center aligned.

Example
								
									
Caption Title

Caption

Example 6

Use helper classes to customize the look on mobile. Use .hide-on-mobile to hide caption content on screens with a width less than 768px. Use .v-align-top-on-mobile and .v-align-bottom-on-mobile to align caption content differently on screens with a width less than 768px. This is useful when caption content needs to be hidden or its' position changed when images scale to smaller sizes.

The Himalayas

A default overlay caption that is vertically aligned top and center aligned.

Example
								
									
Caption Title

Caption


Rollovers

Create simple and effective rollovers using a range to predefined animation classes. Note: Rollovers require timber.min.js.

Linked Rollover
Animation Classes
  • .overlay-fade-out
  • .overlay-fade-in
  • .img-scale-in
  • .overlay-fade-img-scale-in
  • .overlay-fade-img-scale-out
  • .overlay-slide-in-top
  • .overlay-slide-in-left
  • .overlay-slide-in-right
  • .overlay-slide-in-bottom
  • .overlay-img-slide-up
  • .overlay-img-slide-left
  • .overlay-img-slide-right
  • .overlay-img-slide-down
  • .overlay-scale-in
Example
Linked Content

Style rollovers further by adding components such as buttons and/or icons.

Socialize with us

Example
Rollover Attributes New

Control the rollover speed, easing, color and opacity through the following attributes: data-hover-speed, data-hover-easing, data-hover-bkg-color and data-hover-bkg-opacity.

Example

Important: Overlay background color should be entered as a hexadecimal color i.e. #000000. Do not use shorthand hexadecimal colors i.e. #000.


Images Grids

Create simple responsive image grids on the fly. Choose between one, two, three, four, five and six columns.

With Margins
Example
								
									
Marginless

Optionally create a marginless grid by adding the .no-margins class to the image grid wrapper.

Example
								
									
Theme Mountain

Current Version