CaptionHover.js jQuer Plugin Demos

Lily

This is Lily

Lily has a subtle image transition and display of caption

View more

This is Lily

Lily has a subtle image transition and display of caption

View more

Options

fx: 'lily'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color

Example

								$('.myElement').captionHover({
									    fx: 'lily',
									    figWidth: '49%',
									    headColor: '#fff',
									    captionColor: #fff,
									    overlay: '#3085a3'
								});

Sadie

This is Sadie

Sadie has a gradient overlay.
And a hidden caption.

View more

This is Sadie

Sadie has a gradient overlay.
And a hidden caption.

View more

Options

fx: 'sadie'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color

Example

								$('.myElement').captionHover({
									    fx: 'sadie',
									    headColor: '#fff',
									    captionColor: #fff,
									    overlay: '#3085a3'
								});

Honey

img04

This is Honey effect

View more
img05

This is Honey effect

View more

Options

fx: 'honey'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'honey',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3'
							});

Layla

This is Layla

Layla has lineal transformation and a hidden caption.

View more

This is Layla

Layla has lineal transformation and a hidden caption.

View more

Options

fx: 'layla'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'layla',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3',
							});
							//border colors can be changed via CSS

Zoe

This is Zoe

Zoe has a hidden caption tile and icons.

This is Zoe

Zoe has a hidden caption tile and icons. Longer texts are accomodated automatically.

Options

fx: 'zoe'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient
bgCaption : hex | html color
iconColor : hex | html color

Example

							$('.myElement').captionHover({
								    fx: 'zoe',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3',
								    bgCaption: '#CDB7B5',
								    iconColor: '##3c4a50',
							});

Oscar

This is Oscar

Oscar has a square animation and a hidden caption, plus a heavy overlay.

View more

This is Oscar

Oscar has a square animation and a hidden caption, plus a heavy overlay.

View more

Options

fx: 'oscar'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'oscar',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3'
							});
							//border colors can be changed via CSS

Marley

This is Marley

Marley has a thick border and a hidden caption

View more

This is Marley

Marley has a thick border and a hidden caption

View more

Options

fx: 'marley'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'marley',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3'
							});
							//border color and thickness can be changed via CSS

Ruby

This is Ruby

Ruby has a caption inside an animated box with borders (and the image scales a bit).

View more

This is Ruby

Ruby has a caption inside an animated box with borders (and the image scales a bit).

View more

Options

fx: 'ruby'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'ruby',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#3085a3'
							});
							//border color can be changed via CSS

Roxy

This is Roxy

Roxy has an image transformation and a hidden caption...oh, and a multicolored overlay

View more

This is Roxy

Roxy has an image transformation and a hidden caption...oh, and a multicolored overlay.

View more

Options

fx: 'roxy'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'roxy',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: 'linear-gradient(45deg, #ff89e9 0%, #05abe0 100%)'
							});
							//border color and gradient can be changed in CSS

Sophie

This is Sophie

Sophie is much like the others...but different.

View more

This is Sophie

Sophie is much like the others...but different.

View more

Options

fx: 'sophie'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'sophie',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: '#9e5406'
							});
							//border color and gradient can be changed in CSS

Romeo

This is Romeo

Romeo has some cool line animations.

View more

This is Romeo

Romeo has some cool line animations.

View more

Options

fx: 'romeo'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'romeo',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: #3085a3,
							});
							//border color can be changed in CSS

Dexter

This is Dexter

Dexter has ahidden caption inside an animated box.

View more

This is Dexter

Dexter has ahidden caption inside an animated box.

View more

Options

fx: 'dexter'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'dexter',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: 'linear-gradient(to bottom, #258dc8 0%, #683c13 100%)'
							});
							//border color can be changed in CSS

Sarah

This is Sarah

Sarah has an animated caption and border.

View more

This is Sarah

Sarah has an animated caption and border.

View more

Options

fx: 'sarah'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'sarah',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: #42b078
							});
							//border color can be changed in CSS

Chico

This is Chico

Chico has more animations and scaling images.

View more

This is Chico

Chico has more animations and scaling images.

View more

Options

fx: 'chico'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'chico',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: #3085a3
							});
							//border color can be changed in CSS

Milo

This is Milo

Milo has a scaling background and a small caption.

View more

This is Milo

Milo has a scaling background and a small caption.

View more

Options

fx: 'milo'
figWidth : px | % | em
figHeight : px | % | em
headColor : hex | html color
captionColor : hex | html color
overlay : hex | html color | CSS3 gradient

Example

							$('.myElement').captionHover({
								    fx: 'milo',
								    headColor: '#fff',
								    captionColor: #fff,
								    overlay: #2e5d5a
							});
							//border color can be changed in CSS