
<div class="ol-typo-colswrap cols-4">
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Default Image Wrap</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-76" class="ol-typo-img-wrap img-wrap-1"><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Shadowed Image 1</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-77" class="ol-typo-img-wrap img-wrap-2">
<div><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Shadowed Image 2</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-78" class="ol-typo-img-wrap img-wrap-3">
<div>
<div><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="ol-typo-column last">
<h4 style="margin-top: 0;">Blue Border Image</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-79" class="ol-typo-img-wrap img-wrap-4"><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
</div>
<div class="ol-typo-colswrap cols-4">
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Grey Border Image</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-80" class="ol-typo-img-wrap img-wrap-5"><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">White back description</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-81" class="ol-typo-img-wrap img-wrap-6"><img src="images/articles.jpg" alt="" /><span>Your awesome description</span></div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Blue back description</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-82" class="ol-typo-img-wrap img-wrap-7"><span><span>Your awesome description</span></span><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
<div class="ol-typo-column last">
<h4 style="margin-top: 0;">Caption Image</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-83" class="ol-typo-img-wrap img-wrap-8">
<div>
<div><img src="images/articles.jpg" alt="" /><span>Your awesome description</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ol-typo-colswrap cols-4">
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Bubble description</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-84" class="ol-typo-img-wrap img-wrap-9"><img src="images/articles.jpg" alt="" /><span>Your awesome description</span></div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Border description</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-85" class="ol-typo-img-wrap img-wrap-10"><img src="images/articles.jpg" alt="" /><span>Your awesome description</span></div>
</div>
</div>
<div class="ol-typo-column">
<h4 style="margin-top: 0;">Image Link 1</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-86" class="ol-typo-img-wrap img-wrap-11"><img src="images/articles.jpg" alt="" /><a href="#">Your awesome description</a></div>
</div>
</div>
<div class="ol-typo-column last">
<h4 style="margin-top: 0;">Image Link 2</h4>
<div class="ol-typo-blockct clearfix">
<div id="typo-87" class="ol-typo-img-wrap img-wrap-12"><img src="images/articles.jpg" alt="" /><a href="#">Your awesome description</a></div>
</div>
</div>
</div>
<h3>Code</h3>
<div class="ol-typo-pre-title">Sample Codes</div>
<pre><span style="color: green;"> /* Default Image */</span>
&lt;div class="ol-typo-img-wrap"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
&lt;/div&gt;

<span style="color: green;"> /* Shadowed Image */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-2"&gt;
	&lt;div&gt;
		&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;/div&gt;
&lt;/div&gt;

<span style="color: green;"> /* Shadowed Image 2 */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-3"&gt;
	&lt;div&gt;
		&lt;div&gt;
			&lt;img src="images/articles.jpg" alt="" /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

<span style="color: green;"> /* Blue Border Image */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-4"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
&lt;/div&gt;

<span style="color: green;"> /* Gray Border Image */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-5"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
&lt;/div&gt;

<span style="color: green;"> /* Description With White Background */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-6"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;span&gt;Your awesome description&lt;/span&gt;
&lt;/div&gt;

<span style="color: green;"> /* Description With Blue Background */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-7"&gt;
	&lt;span&gt;
		&lt;span&gt;Your awesome description&lt;/span&gt;
	&lt;/span&gt;
		&lt;img src="images/articles.jpg" alt="" /&gt;
&lt;/div&gt;

<span style="color: green;"> /* Caption Description */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-8"&gt;
	&lt;div&gt;
		&lt;div&gt;
			&lt;img src="images/articles.jpg" alt="" /&gt;
			&lt;span&gt;Your awesome description&lt;/span&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

<span style="color: green;"> /* Bubble Description */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-9"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;span&gt;&lt;span class="img-wrap-arr"&gt;&lt;/span&gt;
		Your awesome description
	&lt;/span&gt;
&lt;/div&gt;

<span style="color: green;"> /* Border Description */ </span>
&lt;div class="ol-typo-img-wrap img-wrap-10"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;span&gt;Your awesome description&lt;/span&gt;
&lt;/div&gt;

<span style="color: green;"> /* Image Link 1 */</span>
&lt;div class="ol-typo-img-wrap img-wrap-11"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;a href="#"&gt;Your awesome description&lt;/a&gt;
&lt;/div&gt;

<span style="color: green;"> /* Image Link 2 */</span>
&lt;div class="ol-typo-img-wrap img-wrap-12"&gt;
	&lt;img src="images/articles.jpg" alt="" /&gt;
	&lt;a href="#"&gt;Your awesome description&lt;/a&gt;
&lt;/div&gt;</pre>
<h3 style="margin-top: 0;">Examples</h3>
<h4>IMG-WRAP-7 LEFT</h4>
<div class="ol-typo-img-wrap left img-wrap-7"><span><span>Your awesome description</span></span><img src="images/articles.jpg" alt="" /></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur..</p>
<h4>IMG-WRAP-3 RIGHT</h4>
<div class="ol-typo-img-wrap right img-wrap-3">
<div>
<div><img src="images/articles.jpg" alt="" /></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur..</p>