[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156fad8eefa3abd3c75fe03_image_title.svg" title="Image%20Title" description="Add%20titles%20and%20information%20about%20your%20images%20in%20a%20variety%20of%20styles%20with%20the%20Image%20Title%20Design%20Element.%20Make%20your%20images%20more%20interesting%20and%20invite%20interaction%20with%20a%20mouse%20hover%20action." /]

Image Titles OPTIONS DEMOS

Default View

[divider style="double-dotted" /]

[image-titles class="shortpoint-copy"]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Title%20Text" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Title%20Text" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Title%20Text" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Title%20Text" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[/image-titles]

Different Styles

[divider style="double-dotted" /]

[image-titles responsive="6" class="shortpoint-copy"]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FShortpoint-The-End-of-Productivity-2.jpg" title="Default" description="Lorem%20ipsum%20dolor%20sit%20amet" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Quarter%20Slide%20Up" description="Lorem%20ipsum%20dolor%20sit%20amet" style="quarter-slide-up" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Quarter%20Slide%20Side" description="Lorem%20ipsum%20dolor%20sit%20amet" style="quarter-slide-side" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Quarter%20Fall%20In" description="Lorem%20ipsum%20dolor%20sit%20amet" style="quarter-fall-in" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Quarter%20Two%20Step" description="Lorem%20ipsum%20dolor%20sit%20amet" style="quarter-two-step" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FShortpoint-The-End-of-Productivity-1.jpg" title="Quarter%20Zoom" description="Lorem%20ipsum%20dolor%20sit%20amet" style="quarter-zoom" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FShortpoint-The-End-of-Productivity-3.jpg" title="Cover%20Fade" description="Lorem%20ipsum%20dolor%20sit%20amet" style="cover-fade" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FShortpoint-The-End-of-Productivity-4.jpg" title="Cover%20Push%20Right" description="Lorem%20ipsum%20dolor%20sit%20amet" style="cover-push-right" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FShortpoint-The-End-of-Productivity-5.jpg" title="Revolving%20Door%20Left" description="Lorem%20ipsum%20dolor%20sit%20amet" style="revolving-door-left" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F7.4.jpg" title="Revolving%20Door%20Right" description="Lorem%20ipsum%20dolor%20sit%20amet" style="revolving-door-right" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F7.3.jpg" title="Revolving%20Door%20Top" description="Lorem%20ipsum%20dolor%20sit%20amet" style="revolving-door-top" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fsupport-min-3.jpg" title="Revolving%20Door%20Bottom" description="Lorem%20ipsum%20dolor%20sit%20amet" style="revolving-door-bottom" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F11.8.jpg" title="Cover%20Slide%20Top" description="Lorem%20ipsum%20dolor%20sit%20amet" style="cover-slide-top" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F11.7.jpg" title="Offset" description="Lorem%20ipsum%20dolor%20sit%20amet" style="offset" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F11.6.jpg" title="Guillotine%20Revers" description="Lorem%20ipsum%20dolor%20sit%20amet" style="guillotine-reverse" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F11.5.jpg" title="Half%20Slide" description="Lorem%20ipsum%20dolor%20sit%20amet" style="half-slide" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F9.3.jpg" title="Sqkwoosh" description="Lorem%20ipsum%20dolor%20sit%20amet" style="sqkwoosh" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F9.4.jpg" title="Tunnel" description="Lorem%20ipsum%20dolor%20sit%20amet" style="tunnel" /]

[/image-titles]

Max images per line

[divider style="double-dotted" /]

5 images per line

[image-titles style="quarter-two-step" responsive="5" class="shortpoint-copy"]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fsupport-min-3.jpg" title="Title%20Text" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[/image-titles]

Shape

[divider style="double-dotted" /]

Wide

[image-titles style="cover-fade" shape="wide" responsive="5" class="shortpoint-copy"]

[/image-titles]

Tall

[image-titles style="cover-fade" shape="tall" responsive="5" class="shortpoint-copy"]

[/image-titles]

Different Colors

[divider style="double-dotted" /]

[image-titles style="quarter-slide-side" responsive="5" class="shortpoint-copy"]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Blue%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." color="blue" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Green%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." color="green" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Red%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." color="red" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Violet%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." color="violet" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fsupport-min-3.jpg" title="Orange%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." color="orange" /]

[/image-titles]

Text Colors

[divider style="double-dotted" /]

[image-titles style="quarter-slide-side" responsive="5" color="white" class="shortpoint-copy"]

[image-title text-color="blue" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Blue%20Text%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title text-color="green" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Green%20Text%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title text-color="red" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Red%20Text%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title text-color="violet" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Violet%20Text%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[image-title text-color="orange" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fsupport-min-3.jpg" title="Orange%20Text%20Color" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." /]

[/image-titles]

Horizontal Alignment

[divider style="double-dotted" /]

[image-titles style="quarter-slide-side" shape="wide" responsive="5" class="shortpoint-copy"]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Left%20Text%20Alignment" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." alignment="left" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Center%20Text%20Alignment" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." alignment="center" /]

[image-title image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Right%20Text%20Alignment" description="Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit." alignment="right" /]

[/image-titles]

Spacing

[divider style="double-dotted" /]

Spacing 0

[image-titles style="cover-slide-top" responsive="5" spacing="0" class="shortpoint-copy"]

[/image-titles]

Custom Width

[divider style="double-dotted" /]

50% Width

[image-titles style="revolving-door-top" responsive="5" width="50%25" class="shortpoint-copy"]

[/image-titles]

Linking Options

[divider style="double-dotted" /]

Lightbox

[image-titles shape="wide" class="shortpoint-copy"]

[image-title text-color="white" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Image" description="In%20the%20lightbox" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" linking="lightbox" color="border-dark" /]

[image-title text-color="white" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Youtube%20Video" description="In%20the%20lightbox" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" linking="lightbox" color="red" /]

[image-title text-color="white-light" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Vimeo%20Video" description="In%20the%20lightbox" link="https%3A%2F%2Fvimeo.com%2F200671449" linking="lightbox" color="info" /]

[image-title text-color="white-light" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Google%20Map" description="In%20the%20lightbox" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" linking="lightbox" color="primary-dark" /]

[/image-titles]

New Window

[image-titles shape="wide" class="shortpoint-copy"]

[image-title text-color="white" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.12.jpg" title="Image" description="In%20the%20new%20window" link="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2F3yfswcfj6do-garth-pratt-min-1.jpg" linking="new-window" color="border-dark" /]

[image-title text-color="white" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.11.jpg" title="Youtube%20Video" description="In%20the%20new%20window" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQPdWJeybMo8" linking="new-window" color="red" /]

[image-title text-color="white-light" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.10.jpg" title="Vimeo%20Video" description="In%20the%20new%20window" link="https%3A%2F%2Fvimeo.com%2F200671449" linking="new-window" color="info" /]

[image-title text-color="white-light" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.9.jpg" title="Google%20Map" description="In%20the%20new%20window" link="https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan%2BFrancisco%252C%2BCA%252C%2BUSA!5e0!3m2!1sen!2sua!4v1477074759345" linking="new-window" color="primary-dark" /]

[/image-titles]

[sp-demo-doc] Style – the caption animation style:

Quarter Slide Up
Quarter slide Side
Quarter Fall In
Quarter Two Step
Quarter Zoom
Cover Fade
Cover Push Right
Revolving Dor Left
Revolving Door Right
Revolving Door Top
Revolving Door Bottom
Cover Slide Top
Offset
Guillotine revers
Half Slide
Sqkwoosh
Tunnel

Shape – by default the shape is square:

Square
Wide
Tall

Max images per line – how many images you want to show in each line. By default it is 4 images

Color – what is the caption color. By default it is primary. All colors available at ShortPoint Colors page

Text Color – what is the caption text color. By default it is white. All colors available at ShortPoint Colors page

Horizontal alignment – caption text horizontal alignment:

Left
Center
Right

Spacing – control the spacing between images:

Default
0
2x
3x

Width – by default images will cover the container width

Image – link to the image
Title – image title
Description – Image description
Link – link where you will redirect
Linking options – there you can choose how to open your link:

Default – by default link will be opened in the same window
LightBox – your Link will be opened in the lightbox
New window – your link will be opened in the new tab
Dialog – your Link will be opened in the dialog window

[/sp-demo-doc]

Image Titles // <![CDATA[ _spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout"); // ]]>

Image Titles OPTIONS DEMOS

Default View

Different Styles

Max images per line

5 images per line

Shape

Wide

Tall

Different Colors

Text Colors

Horizontal Alignment

Spacing

Spacing 0

Custom Width

50% Width

Linking Options

Lightbox

New Window

Image Titles