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
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 – sadie

<strong>Example Title</strong>
<strong>Lorem ipsum dolor sit amet.</strong>
<strong>#</strong>

Example Title
Lorem ipsum dolor sit amet.
#

Example 2 – goliath

<strong>Example Title</strong>
<strong>Lorem ipsum dolor sit amet.</strong>
<strong>#</strong>

Example 3 – julia

<strong>Example Title</strong>
<strong>Lorem ipsum dolor sit amet.</strong>
<strong>#</strong>

Example 4 – marley

<strong>Example Title</strong>
<strong>Lorem ipsum dolor sit amet.</strong>
<strong>#</strong>

Testimonial

Parameters

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

Your custom text here
<strong>bill gates</strong>
<strong>famous visionary</strong>

Pellentesque venenatis magna sit amet nibh vestibulum posuere. Sed vitae risus aliquam, suscipit magna quis, vestibulum erat. Etiam commodo nisi sed urna aliquam vehicula. In sagittis dui dui, non ultrices ex blandit vel. Donec sit amet sem elit. Fusce efficitur porttitor lorem ac dictum. Curabitur eleifend sapien nulla, ac auctor ex pretium ac.

bill gates

famous visionary

Your custom text here
<strong>steven tyler</strong>
<strong>famous singer</strong>

Nunc at pellentesque massa, a euismod nisl. Sed quam diam, ultrices ac enim a, cursus gravida lorem. Etiam non suscipit massa. Proin condimentum tristique augue ac varius. Maecenas feugiat ex vitae massa viverra tincidunt et sed tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

steven tyler

famous singer

Video Gallery

Parameters

id : ID of video
web : youtube / vimeo
fs : 1 / 0
size : 1 – 12 (grid)

If you want to use PE Video shortcode than it is required that you provide ...
If you want to use PE Video shortcode than it is required that you provide ...
If you want to use PE Video shortcode than it is required that you provide ...
If you want to use PE Video shortcode than it is required that you provide ...
If you want to use PE Video shortcode than it is required that you provide ...

Image Gallery

Parameters

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

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

<strong>Accordion 1</strong>
Some text here that will be included in accordion
<strong>Accordion 2</strong>
Some text here that will be included in accordion
<strong>Accordion 3</strong>
Some text here that will be included in accordion

Accordion 1

Ut lectus felis, facilisis nec erat at, pretium pellentesque lectus. Donec sit amet nibh est. Morbi augue libero, pretium vitae nulla ac, malesuada ultricies neque. Donec eget neque erat. Nam dictum justo sit amet placerat consectetur. Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula. Fusce eu risus sit amet metus sagittis volutpat vehicula porttitor elit. Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat.

Accordion 2

Accordion 3

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

<strong>Tab Name 1</strong>
<strong>Tab Name 2</strong>
<strong>Tab Name 3</strong>
Some text here that will be included in tab content
Some text here that will be included in tab content
Some text here that will be included in tab content

Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat.

Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula.

Pellentesque sodales elit id pellentesque convallis. Sed sit amet lacinia augue. Nunc sit amet sapien neque. Donec neque neque, hendrerit et gravida eget, aliquam quis urna.

<strong>Tab Name 1</strong>
<strong>Tab Name 2</strong>
<strong>Tab Name 3</strong>
Some text here that will be included in tab content
Some text here that will be included in tab content
Some text here that will be included in tab content

Pellentesque sodales elit id pellentesque convallis. Sed sit amet lacinia augue. Nunc sit amet sapien neque. Donec neque neque, hendrerit et gravida eget, aliquam quis urna.

Columns

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

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

 Some content here, other shortcodes can be included 
 Some content here, other shortcodes can be included 
 Some content here, other shortcodes can be included

1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.

1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.

1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.

Pricing Table – example 1

This shortcode allows you to display Pricing Table.

Parameters

size: width in PX or %
price_up
price_middle
price_down
title
subtitle
button_link: URL with http://
button_text

as low as19.85month
DSL Internet
Step up to incredible DSL cable internet
<ul><li>Lorem ipsum dolor sit amet</li><li>Morbi rhoncus diam quis augue</li><li>Proin non finibus diam</li><li>Pellentesque varius</li><li>Vivamus quis leo</li><li>Donec ut elit maximus</li></ul>
I'm Interested
as low as14.85month
DSL Internet
Step up to incredible DSL cable internet
<ul><li>Lorem ipsum dolor sit amet</li><li>Morbi rhoncus diam quis augue</li><li>Proin non finibus diam</li><li>Pellentesque varius</li><li>Vivamus quis leo</li><li>Donec ut elit maximus</li></ul>
I'm Interested

as low as19.85month

DSL Internet

Step up to incredible DSL cable internet

Lorem ipsum dolor sit amet
Morbi rhoncus diam quis augue
Proin non finibus diam
Pellentesque varius
Vivamus quis leo
Donec ut elit maximus

I'm Interested

as low as14.85month

DSL Internet

Step up to incredible DSL cable internet

Lorem ipsum dolor sit amet
Morbi rhoncus diam quis augue
Proin non finibus diam
Pellentesque varius
Vivamus quis leo
Donec ut elit maximus

I'm Interested

Pricing Table – example 2

This shortcode allows you to display Pricing Table.

Parameters

title
size: width in PX or %
service_title
service_price

<strong>Service 1</strong>
<strong>Lorem ipsum dolor</strong> <strong>$39</strong>
<strong>Donec lobortis quam</strong> <strong>$45</strong>
<strong>Pellentesque habitant</strong> <strong>$68</strong>
<strong>In a facilisis augue</strong> <strong>$28</strong>
<strong>Aenean et placerat erat</strong> <strong>$55</strong>
<strong>Nam neque massa</strong> <strong>$78</strong>
<strong>Service 2</strong>
<strong>Lorem ipsum dolor</strong> <strong>$39</strong>
<strong>Donec lobortis quam</strong> <strong>$45</strong>
<strong>Pellentesque habitant</strong> <strong>$68</strong>
<strong>In a facilisis augue</strong> <strong>$28</strong>
<strong>Aenean et placerat erat</strong> <strong>$55</strong>
<strong>Nam neque massa</strong> <strong>$78</strong>
<strong>Service 3</strong>
<strong>Lorem ipsum dolor</strong> <strong>$39</strong>
<strong>Donec lobortis quam</strong> <strong>$45</strong>
<strong>Pellentesque habitant</strong> <strong>$68</strong>
<strong>In a facilisis augue</strong> <strong>$28</strong>
<strong>Aenean et placerat erat</strong> <strong>$55</strong>
<strong>Nam neque massa</strong> <strong>$78</strong>

<strong>Service 1</strong>
<strong>Lorem ipsum dolor</strong>	<strong>$39</strong>
<strong>Donec lobortis quam</strong>	<strong>$45</strong>
<strong>Pellentesque habitant</strong>	<strong>$68</strong>
<strong>In a facilisis augue</strong>	<strong>$28</strong>
<strong>Aenean et placerat erat</strong>	<strong>$55</strong>
<strong>Nam neque massa</strong>	<strong>$78</strong>

<strong>Service 2</strong>
<strong>Lorem ipsum dolor</strong>	<strong>$39</strong>
<strong>Donec lobortis quam</strong>	<strong>$45</strong>
<strong>Pellentesque habitant</strong>	<strong>$68</strong>
<strong>In a facilisis augue</strong>	<strong>$28</strong>
<strong>Aenean et placerat erat</strong>	<strong>$55</strong>
<strong>Nam neque massa</strong>	<strong>$78</strong>

<strong>Service 3</strong>
<strong>Lorem ipsum dolor</strong>	<strong>$39</strong>
<strong>Donec lobortis quam</strong>	<strong>$45</strong>
<strong>Pellentesque habitant</strong>	<strong>$68</strong>
<strong>In a facilisis augue</strong>	<strong>$28</strong>
<strong>Aenean et placerat erat</strong>	<strong>$55</strong>
<strong>Nam neque massa</strong>	<strong>$78</strong>

Service 1
Lorem ipsum dolor	$39
Donec lobortis quam	$45
Pellentesque habitant	$68
In a facilisis augue	$28
Aenean et placerat erat	$55
Nam neque massa	$78

Service 2
Lorem ipsum dolor	$39
Donec lobortis quam	$45
Pellentesque habitant	$68
In a facilisis augue	$28
Aenean et placerat erat	$55
Nam neque massa	$78

Service 3
Lorem ipsum dolor	$39
Donec lobortis quam	$45
Pellentesque habitant	$68
In a facilisis augue	$28
Aenean et placerat erat	$55
Nam neque massa	$78

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

You must provide valid address or coordinates (1)

Headline

This shortcode allows you to display headline with effect.

Parameters

subtitle
class : custom css class
style : custom css styles

Our clinic description in 3 words:<strong>reliabilityexperienceeffectiveness</strong>

Our clinic description in 3 words:reliabilityexperienceeffectiveness

Speed

This shortcode allows you to display internet speed in a cool way.

Parameters

up
middle
down

<strong>Up to</strong><strong>250</strong><strong>Mbps</strong>

Up to250Mbps

Shortcodes

Animated hover CSS3 effects for images

<strong>Example Title</strong>

Example Title

<strong>Example Title</strong>

Example Title

<strong>Example Title</strong>

Example Title

<strong>Example Title</strong>

Example Title

Testimonial

Video Gallery

Image Gallery

Accordion

Tabs

Columns

Pricing Table – example 1

Pricing Table – example 2

Google Map

Headline

Our clinic description in 3 words:<strong>reliabilityexperienceeffectiveness</strong>

Our clinic description in 3 words:reliabilityexperienceeffectiveness

Speed