Animated hover CSS3 effects for images

These shortcodes allows you to display an image and its description with animated CSS3 effect.
Note: If you would like to add your own text into the image description, just modify the shortcode below or edit an existing shortcode of the demo template.

Parameters

• title
• titletag: choose HTML tag for a title: h1, h2, h3, h4, h5, h6, p, span (default: h2)
• subtitle
• effect : saddie / goliath / julia / marley
• background : URL to image with http://
• fontcolor : color value (HEX)
• width : size in PX
• height : size in PX
• link : URL with http://
• target : _self / _blank

Example 1

[anibox alt="placeholder 1" effect="sadie" background="http://placehold.it/480x360" fontcolor="#000000" width="480" height="360" link="#" title="Example Title" titletag="h2" subtitle="Lorem ipsum dolor sit amet."]

Example 2

[anibox alt="placeholder 2" effect="goliath" background="http://placehold.it/480x360"  fontcolor="#ffffff" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]

Example 3

[anibox alt="placeholder 3" effect="julia" background="http://placehold.it/480x360" fontcolor="#000000" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]

Example 4

[anibox alt="placeholder 4" effect="marley" background="http://placehold.it/480x360" fontcolor="#ffffff" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]

Testimonial

Parameters

• title
• subtitle
• class : custom css class (eg. right)

[testimonial class="right" title="bill gates" subtitle="famous visionary"] Nunc at pellentesque... [/testimonial]

[testimonial title="steven tyler" subtitle="famous singer"] Nunc at pellentesque... [/testimonial]

Video Gallery

Parameters

• id : ID of video
• web : youtube / vimeo
• fs : 1 / 0
• size : 1 – 12 (grid)
• alt : alternative text showed if browser can’t display video correctly

[row][pevideo id="Hq8SzbapPkA" web="youtube" fs="1" size="4" alt="sample alt text"][pevideo id="74195893" web="vimeo" fs="1" size="4"][pevideo id="_XwrAefrCxc" web="youtube" fs="0" size="4"][/row][row][pevideo id="dtncYXTbjOk" web="youtube" fs="1" size="6"][pevideo id="hIhXtoyN_6A" web="youtube" fs="1" size="6"][/row]

Image Gallery

Parameters

• orderby : none / ID / author / title / date / modified / parent / rand / comment_count / menu_order / post__in
• order : ASC / DESC
• id : image ID
• columns : 1 – 12 (grid)
• size : full / medium / thumbnail (image size)
• link : URL with http://
• modal : enable / disable

[pegallery modal="enable" size="full" columns="3" ids="1757, 1758, 1759, 1760, 1761, 1762" orderby="rand"]

Accordion

This shortcode allows you to display accordion panels inside posts or widgets.
Note: Remember to always set the accordion title, and if you want that one of the accordions to be open on page load then enter the status attribute to „active”.

Parameters

• title
• status : active

[accordion][accordion_content title="Accordion 1" status="active"] Ut lectus felis... [/accordion_content][accordion_content title="Accordion 2"] Ut lectus felis... [/accordion_content][accordion_content title="Accordion 3"] Ut lectus felis... [/accordion_content][/accordion]

Tabs

This shortcode allows you to display tabs inside posts or widgets.
Note: Remember to always set the tab title, and if you want than one of the tabs to be open on page load then enter the status attribute to „active”.

Parameters

• class : custom css class

• title
• status : active

[tabs][tab title="Tab 1" status="active"] Sed fringilla purus... [/tab][tab title="Tab 2"] Maecenas laoreet, ligula... [/tab][tab title="Tab 3"] Pellentesque sodales elit... [/tab][/tabs]

[tabs class="pe-clean"][tab title="Tab 1" status="active"] Sed fringilla purus... [/tab][tab title="Tab 2"] Maecenas laoreet, ligula... [/tab][tab title="Tab 3"] Pellentesque sodales elit... [/tab][/tabs]

Grid

This shortcode allows you to display columns inside posts or widgets. Note: It is needed to use the col short inside row shortcode. As well you can choose class suffix for different screens by using screen attribute, default is „md”.

Parameters

• title
• margin : 1 / 0
• size : 1 – 12 (grid)
• screen : xs / sm / md / lg (grid)

[row][col size="6" screen="sm"] 1/2 Phasellus vulputate ac... [/col][col size="6" screen="sm"] 1/2 Phasellus vulputate ac... [/col][/row][row][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][/row][row][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4  Phasellus vulputate ac... [/col][/row]

Table

This shortcode allows you to display Pricing Table.

Parameters

• size : width in PX or %
• head : true / false (table heading display)

[table size="100%" head="true"]
Your title | ipsum | dolor | sit
content | lorem | ipsum | dolor
sit | amet | consectetur | adipiscing
tempus | lacinia | scelerisque | porttitor
laoreet | ultricies | diam | eget
arcu | molestie | dapibus | sollicitudin
[/table]

Google Map

This shortcode allows you to display Google Map.

Parameters

• address
• latitude : number
• longitutde : number
• width: PX or %
• height: PX or %
• enablescrollwheel: true / false
• disablecontrols: ture / false
• zoom : 0 – 23
• tooltip : enable / disable

[map address="New York City"]

Headline

This shortcode allows you to display headline with effect.

Parameters

• subtitle
• class : custom css class
• style : custom css styles

[headline subtitle="reliability, experience, effectiveness"] Lorem ipsum dolor sit amet: [/headline]

Icontext

This shortcode allows you to display text with Font Awesome icon and link.

Parameters

• title
• icon : font Awesome class
• link : URL with http://

[icontext link="#" title="Lorem ipsum dolor sit amet" icon="fa-coffee"] Lorem ipsum dolor... [/icontext]