[ux_banner height="500px" bg="17" bg_overlay="rgba(0, 0, 0, 0.42)"]

[text_box]

<h3 class="uppercase"><strong>IMAGE BOX ELEMENT</strong></h3>
<p class="lead">Create amazing image boxes with unlimited style options.</p>

[/text_box]

[/ux_banner]
[section]

[row]

[col span="4"]

[ux_image_box img="16"]

<h4>Simple Style</h4>
<p>Some smaller text</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="bounce" img="16"]

<h4>Bounce Style</h4>
<p>Add anything here</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="badge" img="16"]

<h4>Badge Style</h4>
<p>You can add shortcodes here</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="overlay" img="16"]

<h2>Overlay Style</h2>
<p class="lead">Add any elements here..</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="label" img="16"]

<h4>Label Style</h4>
<p>Add any elements here..</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="shade" img="16"]

<h4>Shade Style</h4>
<p class="lead">Add any elements here..</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="push" img="16" image_height="90%" text_hover="bounce"]

<h2>Push Style</h2>
<p>Add any elements here..</p>
[divider]


[/ux_image_box]

[/col]
[col span="8" depth="2" depth_hover="5"]

[ux_image_box style="vertical" img="16" image_width="48"]

<h2>Vertical Style Boxed</h2>
<p class="lead">Add any elements here..</p>
[button text="A button" style="secondary alt-button" radius="10"]


[/ux_image_box]

[/col]

[/row]

[/section]
[section]

[row]

[col align="center"]

<h2>Create any kind of Image box by using the options in the Page Builder.</h2>
<p class="lead">We have created many examples here. Mix and Match effects to create your perfect Image Box</p>

[/col]
[col span="4" depth="1"]

[ux_image_box img="16" image_height="100%"]

<h4>Simple Centered Style</h4>
<p>Some smaller text</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="bounce" img="16" image_height="100%" depth="1" text_bg="rgb(66, 66, 66)" text_color="dark"]

<h4>Bounce Style</h4>
<p>Add anything here</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="overlay" img="16" image_height="125%" image_hover="blur" text_pos="middle" text_size="small" text_hover="zoom-in"]

<h2>Overlay Style With Blur and Zoom</h2>
<p>Add any elements here..</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="overlay" img="16" image_height="100%"]

<h4>Circle with Blur In Effect</h4>
<p>Add any elements here..</p>

[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="shade" img="16" image_height="116%"]

<h4>Simple Shade  Style</h4>
<p class="lead">A beautiful box.</p>
[button text="Quick View" style="white"]


[/ux_image_box]

[/col]
[col span="4"]

[ux_image_box style="shade" img="16" image_height="100%" image_radius="100" image_hover="zoom" text_pos="middle" text_hover="bounce"]

<h3 class="uppercase">Circle Image</h3>
<p class="lead">Create this by adding radius 100% to the image.</p>

[/ux_image_box]

[/col]

[/row]

[/section]