Create Account
  • You are here:
  • Home
  • Typography
  • Image Styles

 

Our website is currently under development and keep uploading a kind of contents.

Please subscribe to our newsletter at the bottom of the page to get information about the latest news.

 

IMAGE STYLES
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style2">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow lifted"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image">
		<div class="jf_image noborder">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow raised"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow curved"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow curved curved_hz_1"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow curved curved_hz_2"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 insetshadow" style="float:none">
	<span class="jf_blog_image noborder rotated">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow lifted rotated"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block fixed_1_150">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_1_220">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_1_320">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_1_420">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block fixed_2_150">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_2_220">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_2_320">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
<div class="jf_image_block fixed_2_420">
	<span class="jf_blog_image noborder">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
	<div class="shadow_fixed"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
 
GET CODE
<div class="jf_image_block style3 padding" style="float:none">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_4.jpg">
		</div>
		<div class="jf_zoom">
			<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg">&nbsp;</a>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
 
GET CODE
<ul class="jf_typo_gallery">
	<li>
		<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg"> 
			<img src="/images/jf/gallery/thumb/image_4.jpg">
			<div class="zoom"></div>
		</a>
	</li>
	<li>
		<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_4.jpg"> 
			<img src="/images/jf/gallery/thumb/image_4.jpg">
			<div class="zoom"></div>
		</a>
	</li>
</ul>