Animated hover CSS3 effects for images

This code 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 code of the demo template.

Example 1

[first_box imagebg="http://demo.pixelemu.com/pe-beauty-center/wp-content/uploads/2015/09/animated.jpg" link="#link" firsttitle="CHECK OUR" secondtitle="NEW OFFER!"]

 

 

Example 2

[second_box imagebg="http://demo.pixelemu.com/pe-beauty-center/wp-content/uploads/2015/09/animated.jpg" link="#link" firsttitle="CHECK OUR" secondtitle="NEW OFFER!"]

 

 

Example 3

[third_box imagebg="http://demo.pixelemu.com/pe-beauty-center/wp-content/uploads/2015/09/animated.jpg" link="#link" firsttitle="CHECK OUR" secondtitle="NEW OFFER!"]

 

 

Example 4

[video_box imagebg="http://demo.pixelemu.com/pe-beauty-center/wp-content/uploads/2015/09/animated.jpg" alt="Animated Video box" link="#link" title="Watch the video"]

 

 

PE Light Box

[row][col size="4" ][box style="light" icon="icon2" link="/services/" imgsrc="/wp-content/uploads/2015/09/box1.jpg" alt="Leading Article" subtitle="Our" title="Services" price="Price from $15 to $150"][/col][col size="4" ][box style="light" icon="icon1" link="/register/" imgsrc="/wp-content/uploads/2015/09/box2.jpg" alt="Join our gym" subtitle="Join Our" title="Gym" price="Price from $8 to $230"][/col][col size="4"][box style="light" icon="icon3" link="/gallery/" imgsrc="/wp-content/uploads/2015/09/box3.jpg" alt="Watch video" subtitle="Watch" title="Video" price="For free"][/col][/row]

 

 

PE Dark Box

[row][col size="4" ][box style="dark" link="#" imgsrc="/wp-content/uploads/2015/09/welcome.jpg" alt="Welcome" title="Welcome" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius nisl odio. Pellentesque hendrerit pulvinar tincidunt."][/col][/row]

 

 

Testimonial

Testimonial right

[testimonial class="right" title="bill gates" subtitle="famous visionary"] Your custom text here [/testimonial]
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

 

 

Testimonial default

[testimonial title="steven tyler" subtitle="famous singer"] Your custom text here [/testimonial]
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 Shortcode

[row][pe_video id="JVyoKIXkrl0" web="youtube" fs="0" size="4"][pe_video id="74195893" web="vimeo" fs="0" size="4"][pe_video id="ixduuC4fH3E" web="youtube" fs="0" size="4"][/row] [row][pe_video id="IznjbCJskug" web="youtube" fs="0" size="6"][pe_video id="73847928" web="vimeo" fs="0" size="6"][/row]

 

 

Available options:

  1. id (video ID)
  2. web (video service) : youtube or vimeo
  3. fs (full screen video) : 0 or 1
  4. size (number of from 1 to 12 referring to Bootstrap grid)

 

Image Gallery Shortcode

[gallery pe_image_modal="enable" size="full" columns="4" ids="1022,984,986,996,992,970,1028,976" orderby="rand"]

 

Available options:

  1. pe_image_modal (open image in modal window) : enable or disable
  2. size (image size from Backend -> Media) :
    • thumbnail
    • medium
    • large
    • full
  3. columns (number of columns)
  4. ids (IDs of images from Backend -> Settings -> Media)
  5. order (ascending or descending) : ASC or DESC
  6. orderby (sort images by) :
    • None
    • ID
    • author
    • title
    • name
    • type
    • author
    • modified
    • rand
    • menu_order

 

Accordion Shortcode

This shortcode allows you to display bootstrap accordion 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 active attribute to “1”.

[accordion] [accordion_content title="Accordion 1" active="1"] Some text here that will be included in accordion [/accordion_content] [accordion_content title="Accordion 2" active="1"] Some text here that will be included in accordion [/accordion_content] [accordion_content title="Accordion 3" active="1"] Some text here that will be included in accordion [/accordion_content] [/accordion]

 

Tabs Shortcode

This shortcode allows you to display bootstrap 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”.

[tabs] [tab title="Tab Name 1" status="active"] Some text here that will be included in tab content [/tab] [tab title="Tab Name 2"] Some text here that will be included in tab content [/tab] [tab title="Tab Name 3"] Some text here that will be included in tab content [/tab] [/tabs]
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.
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.

 

 

Columns Shortcode

This shortcode allows you to display bootstrap 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”.

[row] [col size="4" screen="sm"] Some content here, other shortcodes can be included [/col] [col size="4" screen="sm"] Some content here, other shortcodes can be included [/col] [col size="4" screen="sm"] Some content here, other shortcodes can be included [/col] [/row]
1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
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/3
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.
1/4
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.
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 Shortcode

This shortcode allows you to display Pricing Table.

[pricing_table title="Hair Styling" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Massage" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Nail care" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table]
Hair Styling
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
Massage
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
Nail care
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