[ux_banner height="562px" height__sm="368px" bg="17" bg_overlay="rgba(0, 0, 0, 0.27)" parallax="2"]

[text_box width="68" width__sm="81"]

<h2 class="uppercase">Powerful Theme needs powerul images</h2>
<p class="lead">Responsive Images you can insert anywhere. You can also them into a slider.</p>

[/text_box]

[/ux_banner]
[row style="large" v_align="middle"]

[col span="6" span__sm="12" align="center"]

<h1 class="lead">Beautiful Images with Beautiful Captions</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col]
[col span="6" span__sm="12"]

[ux_image id="16" image_size="large" lightbox="true" caption="true" image_overlay="rgba(0, 0, 0, 0.16)" image_hover="zoom-long" animate="fadeInUp"]


[/col]

[/row]
[title style="center" text="Image Overlay Styles"]

[row]

[col span="3" span__sm="6"]

[ux_image id="16" image_hover="glow"]

<p>Glow</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_hover="color" animate="fadeInLeft"]

<p>Add Color</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_hover="grayscale" animate="fadeInLeft"]

<p>Grayscale</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_hover="fade-in" animate="fadeInLeft"]

<p>Fade In</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_hover="zoom-fade" animate="fadeInLeft"]

<p>Zoom Fade</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_overlay="rgba(0, 0, 0, 0.37)" image_hover="overlay-add" animate="fadeInLeft"]

<p>Add Overlay</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_overlay="rgba(0, 0, 0, 0.37)" image_hover="overlay-remove" animate="fadeInLeft"]

<p>Remove Overlay</p>

[/col]
[col span="3" span__sm="6"]

[ux_image id="16" image_hover="blur" animate="fadeInLeft"]

<p>Blur</p>

[/col]

[/row]
[row]

[col span="6" span__sm="12"]

[title style="center" text="Image with video"]

[ux_image id="16" animate="fadeInLeft" link="https://www.youtube.com/watch?v=_j5KR28qtsI"]

<p class="lead">Add a <strong>Youtube or Vimeo</strong> link to Image link tag to automatically get a play icon and a Video Lightbox on Images.</p>

[/col]
[col span="6" span__sm="12"]

[title style="center" text="Image drop shadow"]

[ux_image id="16" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]

<p class="lead">Add cool drop shadows to your images to make them pop out on hover.</p>

[/col]

[/row]
[title style="center" text="Add Images to any sliders" size="undefined"]

[ux_slider style="container" slide_width="700px" bg_color="rgb(0, 0, 0)"]

[ux_image id="16" height="75%" image_hover="overlay-remove" depth_hover="2"]

[ux_image id="16" height="75%" image_hover="overlay-remove" depth="3"]

[ux_image id="16" height="75%" image_hover="overlay-remove"]

[ux_image id="16" height="75%" link="https://www.youtube.com/watch?v=_j5KR28qtsI"]


[/ux_slider]
[row]

[col span="6" span__sm="12"]

[title style="center" text="Image with reverse parallax"]

[ux_image id="16" image_hover="overlay-remove" depth="3" depth_hover="5" parallax="-1" animate="fadeInLeft"]


[/col]
[col span="6" span__sm="12"]

[title style="center" text="Image with PArallax"]

[ux_image id="16" image_hover="overlay-remove" depth="3" depth_hover="5" parallax="1" animate="fadeInLeft"]


[/col]

[/row]
[title style="center" text="Images with lightbox" size="undefined"]

[row]

[col span="3" span__sm="6"]

[ux_image id="16" height="75%" lightbox="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col]
[col span="3" span__sm="6"]

[ux_image id="16" height="75%" lightbox="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col]
[col span="3" span__sm="6"]

[ux_image id="16" height="75%" lightbox="true" caption="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col]
[col span="3" span__sm="6"]

[ux_image id="16" height="75%" lightbox="true" caption="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col]
[col span__sm="12" align="center"]

[title style="center" text="Images with Caption" size="undefined"]

[row_inner]

[col_inner span="4" span__sm="12"]

[ux_image id="16" height="75%" caption="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col_inner]
[col_inner span="4" span__sm="12"]

[ux_image id="16" height="75%" caption="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col_inner]
[col_inner span="4" span__sm="12"]

[ux_image id="16" height="75%" caption="true" image_hover="overlay-remove" depth="3" depth_hover="5" animate="fadeInLeft"]


[/col_inner]

[/row_inner]

[/col]

[/row]