THUMBNAILS

Premium Hover Cicles

MELISSA DOE

10 years of experience in design and programming. john.doe@gmail.com

ROXANA DOE

10 years of experience in design and programming. john.doe@gmail.com

FELICIA DOE

10 years of experience in design and programming. john.doe@gmail.com

JOHN DOE

10 years of experience in design and programming. john.doe@gmail.com

<div class="premium-thumbnail-circle">
	<a href="#">

		<div class="spinner"></div>

				<figure>
					<img src="demo_files/images/people/300x300/d-min.jpg" alt="img">
				</figure>

			<div class="info">
				<div class="info-back">
					<h3>JOHN DOE</h3>

					<p>
						10 years of experience in design and programming. 
						<strong>john.doe@gmail.com</strong>
					</p>
			</div>

		</div>

	</a>
</div>

With Content

Thumbnail label

Donec id elit non mi porta gravida at eget metus id dolor.

Button Button

Thumbnail label

Donec id elit non mi porta gravida at eget metus id dolor.

Button Button

Thumbnail label

Donec id elit non mi porta gravida at eget metus id dolor.

Button Button

Thumbnail label

Donec id elit non mi porta gravida at eget metus id dolor.

Button Button

<div class="row">

	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/people/460x700/8-min.jpg" alt="" />
			<div class="caption">
				<h4>Thumbnail label</h4>
				<p>Donec id elit non mi porta gravida at eget metus id dolor.</p>
				<a href="#" class="btn btn-primary" role="button">Button</a> 
				<a href="#" class="btn btn-default" role="button">Button</a>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/people/460x700/9-min.jpg" alt="" />
			<div class="caption">
				<h4>Thumbnail label</h4>
				<p>Donec id elit non mi porta gravida at eget metus id dolor.</p>
				<a href="#" class="btn btn-primary" role="button">Button</a> 
				<a href="#" class="btn btn-default" role="button">Button</a>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/people/460x700/10-min.jpg" alt="" />
			<div class="caption">
				<h4>Thumbnail label</h4>
				<p>Donec id elit non mi porta gravida at eget metus id dolor.</p>
				<a href="#" class="btn btn-primary" role="button">Button</a> 
				<a href="#" class="btn btn-default" role="button">Button</a>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/people/460x700/12-min.jpg" alt="" />
			<div class="caption">
				<h4>Thumbnail label</h4>
				<p>Donec id elit non mi porta gravida at eget metus id dolor.</p>
				<a href="#" class="btn btn-primary" role="button">Button</a> 
				<a href="#" class="btn btn-default" role="button">Button</a>
			</div>
		</div>
	</div>

</div>

Without Content

<div class="row">

	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/451x300/8-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/451x300/9-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/451x300/10-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid" src="demo_files/images/451x300/12-min.jpg" alt="" />
		</div>
	</div>

</div>

Hover Image Zoom

<div class="thumbnail image-hover-zoom">
	<img class="img-fluid" src="demo_files/images/451x300/1-min.jpg" alt="" />
</div>

Hover Plus Icon

SIMPLE

+ ZOOM

WITHOUT ZOOM
<div class="thumbnail image-hover-plus image-hover-overlay">
	<img class="img-fluid" src="demo_files/images/451x300/1-min.jpg" alt="" />
	<i class="icon-hover-plus"></i>
</div>

WITH ZOOM
<div class="thumbnail image-hover-plus image-hover-zoom image-hover-overlay">
	<img class="img-fluid" src="demo_files/images/451x300/1-min.jpg" alt="" />
	<i class="icon-hover-plus"></i>
</div>

Color Image on Hover

<div class="row">

	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid grayscale-hover-color" src="demo_files/images/451x300/1-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid grayscale-hover-color" src="demo_files/images/451x300/3-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid grayscale-hover-color" src="demo_files/images/451x300/5-min.jpg" alt="" />
		</div>
	</div>
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img class="img-fluid grayscale-hover-color" src="demo_files/images/451x300/7-min.jpg" alt="" />
		</div>
	</div>

</div>

Raster Over Image

<a href="#" class="image-raster image-hover-overlay">
	<img class="img-fluid" class="card-img-top" src="demo_files/images/packs/hotel/gallery/12-min.jpg" alt="">
</a>

Float Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Vero voluptas maxime dolore.

Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus.

<img class="float-left img-fluid" src="demo_files/images/451x300/31-min.jpg" width="300" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>... MORE TEXT ...</p>

Float Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Vero voluptas maxime dolore.

Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus.

<img class="float-right img-fluid" src="demo_files/images/451x300/36-min.jpg" width="300" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>... MORE TEXT ...</p>

Image Zoom

Mouse Over

Grab

Click

Toggle

<!--
	IMAGE ZOOM 
	
	data-mode="mouseover|grab|click|toggle"
-->
<figure class="zoom" data-mode="mouseover">
	<!-- 
		zoom buttton
		
		positions available:
			.bottom-right
			.bottom-left
			.top-right
			.top-left
	-->
	<a class="lightbox top-right" href="demo_files/images/mockups/1200x800/20-min.jpg" data-plugin-options='{"type":"image"}'><i class="glyphicon glyphicon-search"></i></a>

	<!-- high resolution image (1200px width recommended) -->
	<img class="img-fluid" src="demo_files/images/mockups/1200x800/20-min.jpg" width="1200" height="800" alt="" />
</figure>

Image Zoom + Thumbnails

<div class="thumbnail">
	<!--
		IMAGE ZOOM 
		
		data-mode="mouseover|grab|click|toggle"
	-->
	<figure id="zoom-primary" class="zoom" data-mode="mouseover">
		<!-- 
			zoom buttton
			
			positions available:
				.bottom-right
				.bottom-left
				.top-right
				.top-left
		-->
		<a class="lightbox bottom-right" href="demo_files/images/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'>
			<i class="glyphicon glyphicon-search"></i>
		</a>

		<!-- 
			image

			Extra: add .image-bw class to force black and white!
		-->
		<img class="img-fluid" src="demo_files/images/mockups/1200x800/9-min.jpg" width="1200" height="1500" alt="" />
	</figure>

</div>

<!-- 
	Thumbnails (required height:100px) 
	
	data-for = figure image id match
-->
<div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured" data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false}'>
	<a class="thumbnail active" href="demo_files/images/mockups/1200x800/9-min.jpg">
		<img src="demo_files/images/mockups/150x100/9-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/10-min.jpg">
		<img src="demo_files/images/mockups/150x100/10-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/11-min.jpg">
		<img src="demo_files/images/mockups/150x100/11-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/12-min.jpg">
		<img src="demo_files/images/mockups/150x100/12-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/13-min.jpg">
		<img src="demo_files/images/mockups/150x100/13-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/14-min.jpg">
		<img src="demo_files/images/mockups/150x100/14-min.jpg" height="100" alt="" />
	</a>
	<a class="thumbnail" href="demo_files/images/mockups/1200x800/15-min.jpg">
		<img src="demo_files/images/mockups/150x100/15-min.jpg" height="100" alt="" />
	</a>
</div>
<!-- /Thumbnails -->

Shadow

<!--
	AVAILABLE SHADOWS
		box-shadow-1
		box-shadow-2
		box-shadow-3
		box-shadow-4
		box-shadow-5
		box-shadow-6
		box-shadow-7
		box-shadow-8
-->
<figure class="box-shadow-1">
	<img class="img-fluid" src="demo_files/images/600x400/4-min.jpg" alt="" />
</figure>