LinGeo Template

Return to:
G & L WebDesign

Images

LightBox

An alternative method to enlarge images. No page specific javascript is required as with FancyBox. LightBox Plus accommodates images of both horizonal and vertical layout within groups, whereas FancyBox doesn't.

Enlarge Single Images

Rit eget tincidunt

Donec iaculis

Lorem ipsum

Aenean augue

View code
		
	data-lightbox="single-1"
		
	

Enlarge Images in a Group

Rit eget tincidunt

Tempor sit amet

Vestibulum erat

Donec iaculis

View code
		
	data-lightbox="group"
		
	

Odd Number of Images

When dealing with images on rows with a different number it's best to have them all the same height. This can be accomplished by using

div class="row justify-content-center"

Masonry Layout

A Masonry Style Layout can be achieved simply by using card columns. See LawsArt Portfolo from the fourth row down for an example.

Image Flip

See the Cards page for Flip Examples
View code example

<div class="image-flip-card">
	<div class="image-flip-card-front">
		<img class="image-flip-card-image" src="assets/img/site-images/flip-01.jpg">
	</div>
	<div class="image-flip-card-back">
			<img class="image-flip-card-image" src="assets/img/site-images/flip-02.jpg">
		</div>
	</div>

		

Inner Image Magnification

Code data-toggle="magnify"

Corner Ribbon Inline

The corner ribbon is inline to allow for overlay text changes without changing the CSS file.
The master stylesheet has color codes to match the theme color choices.

New

Ole' Mill

Project 1
On Sale

Fog Sets In

Project 1
Popular

Boardwalk

Project 1
Best Value

Harvest Time

Project 1
View code
		
     <div class="container mt-3">
          <div class="row justify-content-around">
              	<div class="col-sm-6">
                	<div class="card card-overlay text-center">
                  		<div class="card-ribbon card-ribbon-top card-ribbon-left bg-primary text-white">New</div>
                  			<h4 class="card-title-2">Ole' Mill</h4>
				<img class="card-img img-fluid" src="assets/imgs/site-imgs/img-20.jpg" alt="Project 1" class="img-fluid" />
          </div>
     </div>
              <div class="col-sm-6">
                	<div class="card card-overlay text-center">
                  		<div class="card-ribbon card-ribbon-top card-ribbon-right bg-warning text-gray">On Sale</div>
                  			<h4 class="card-title-2">Fog Sets In</h4>
				<img class="card-img img-fluid" src="assets/imgs/site-imgs/img-21.jpg" alt="Project 1" class="img-fluid" />
               </div>
          </div>
	</div>
          <div class="row justify-content-around mt-3">
              	<div class="col-sm-6">
                	<div class="card card-overlay text-center">
                  		<div class="card-ribbon card-ribbon-bottom card-ribbon-left bg-danger text-white">Popular</div>
                  			<h4 class="card-title-2">Boardwalk</h4>
				<img class="card-img img-fluid" src="assets/imgs/site-imgs/img-22.jpg" alt="Project 1" class="img-fluid" />
               </div>
          </div>
              	<div class="col-sm-6">
                	<div class="card card-overlay text-center">
                  		<div class="card-ribbon card-ribbon-bottom card-ribbon-right bg-success text-white">Best Value</div>
                  			<h4 class="card-title-2">Harvest Time</h4>
				<img class="card-img img-fluid" src="assets/imgs/site-imgs/img-23.jpg" alt="Project 1" class="img-fluid" />
                		</div>
              	</div>
		</div>
	</div>	
		
	

Offset Ribbon Overlay

Ribbons add emphasis to an item.

SALE
New
Special
Gift Idea
Clearance Item
View code
		
     <div class="container">
          <div class="row products">
               <div class="col-sm-6">
					<div class="image">
                              <a href="#">
                                   <img src="assets/imgs/site-imgs/img-21.jpg" alt="" class="img-fluid image1">
                              </a>
                         </div>
                    <!-- /.image -->
                         <div class="ribbon sale">
                              <div class="theribbon">SALE</div>
                              <div class="ribbon-background"></div>
                    </div>
			</div>
               <div class="col-sm-6">
					<div class="image">
                              <a href="#">
                                   <img src="assets/imgs/site-imgs/img-22.jpg" alt="" class="img-fluid image2">
                              </a>
                         </div>
                    <!-- /.image -->
                         <div class="ribbon new">
                              <div class="theribbon">New</div>
                              <div class="ribbon-background"></div>
                         </div>
                    <div class="ribbon special">
                         <div class="theribbon">Special</div>
                              <div class="ribbon-background"></div>
                    </div>
			</div>
               <div class="col-sm-6">
                         <div class="image">
                         	<a href="#">
                                   <img src="assets/imgs/site-imgs/img-23.jpg" alt="" class="img-fluid image3">
                              </a>
                         </div>
                    <!-- /.image -->
                            <div class="ribbon gift">
                                <div class="theribbon">Gift Idea</div>
                                <div class="ribbon-background"></div>
                        </div>
				</div>
               <div class="col-sm-6">
                         <div class="image">
                              <a href="#">
                                   <img src="assets/imgs/site-imgs/img-24.jpg" alt="" class="img-fluid image4">
                              </a>
                         </div>
                    <!-- /.image -->
						<div class="ribbon clearance">
                              <div class="theribbon">Clearance Item</div>
                              <div class="ribbon-background"></div>
                    </div>
               </div>
		</div>
	</div>
		
	

Ad Overlay

Position an "ad-overlay" on top of an image.

View code
		
     <div class="container mb-3">
          <div class="row products">
               <div class="col-sm-6 img-fluid">
				<div class="ad-over mb-3">
					<img class="ad-over-lrg-img" src="assets/imgs/site-imgs/img-09.jpg" class="img-fluid">
					<img class="ad-over-sml-img" src="assets/imgs/ecom-imgs/sale-lrg.png" />
				</div>
			</div>
               <div class="col-sm-6 img-fluid">
				<div class="ad-over mb-3">
					<img class="ad-over-lrg-img" src="assets/imgs/site-imgs/img-10.jpg" class="img-fluid">
					<img class="ad-over-left-top-sml-img" src="assets/imgs/ecom-imgs/gift.png" />
				</div>
			</div>
		</div>
	</div>
     <div class="container mb-5">
          <div class="row products">
               <div class="col-sm-6 img-fluid">
				<div class="ad-over mb-3">
					<img class="ad-over-lrg-img" src="assets/imgs/site-imgs/img-11.jpg" class="img-fluid">
					<img class="ad-over-right-sml-img" src="assets/imgs/ecom-imgs/gift.png" />
				</div>
			</div>
               <div class="col-sm-6 img-fluid">
			<div class="ad-over-left mb-3">
				<img class="ad-over-left-lrg-img" src="assets/imgs/site-imgs/img-12.jpg" class="img-fluid">
				<img class="ad-over-left-top-sml-img" src="assets/imgs/ecom-imgs/sale-left-lrg.png" />
				</div>
			</div>
		</div>
	</div>	
		
	

Overlay with Text & Link

Rock Formation

View All
Card image cap

Album #1

View code
		
		<div class="container mb-5">
          <div class="card product-card overlay-hover">
     <!-- Hover content -->
          <div class="overlay-hover-content overlay-op-5">
              	<h4 class="text-white">Rock Formation</h4>
              		<a href="#" class="btn btn-primary btn-xlg text-uppercase font-weight-bold mb-2"><i class="fas fa-eye mr-2"></i> View All</a>
          </div>
     <!-- Image & Badge content -->
          <div class="pos-relative">
              	<img class="card-img-top img-fluid" src="assets/imgs/site-imgs/img-09.jpg" alt="Card image cap">
              		<p style="font-size:2rem;"><span class="badge badge-primary pos-absolute pos-t pos-l mt-2 ml-2">Album #1</span></p>
            	</div>
          </div>
	</div>	
		
	

Overlay with Form

Subscribe

Find us on Facebook and Twitter.
View code
		
<section class="pt-5 pb-5 bg-dark text-light" style="background-image: url('assets/imgs/site-imgs/img-12.jpg'); background-size: cover;">
	<div class=" pt-5 pb-5" style=" ">
          <div class="container">
            	<div class="row justify-content-center ">
              		<div class="col-12 col-md-8 col-lg-6 text-center">
                		<h1 class="display-5 mb-3 text-light">Subscribe</h1>
                	<div class="input-group mb-3">
                  		<input type="text" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="basic-addon2">
                  	<div class="input-group-append">
                    	<button class="btn btn-default-lgt" type="button">Subscribe</button>
                  	</div>
               </div>
                		<h5 class="text-h4 mb-5 text-light">Find us on
                  			<a class="text-light p-1 bg-secondary" href="#">Facebook</a> and
                  		<a class="text-light p-1 bg-secondary" href="#">Twitter</a>.</h5>
              		</div>
            	</div>
          </div>
     </div>
</section>
		
	

Image Shapes

Using Bootstrap's rounded-circle can be a bit tricky if the image is not square.
See the code example below as well as reference to the image dimensions in the files.

Round Image

User

Horizontal Oval Image

Rock

Vertical Oval Image

Lighting
View code
		
		<div class="container mb-5">
		<div class="row">
			<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mt-3">
		<h3>Round Image</h3>
			<img src="assets/imgs/site-imgs/user-03.jpg" class="rounded-circle" alt="User" width="236" height="236"> 
		</div>
			<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mt-3">
		<h3>Horizontal Oval Image</h3>
			<img src="assets/imgs/site-imgs/img-15.jpg" class="rounded-circle" alt="Rock" width="300" height="236"> 
		</div>
			<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mt-3">
		<h3>Vertical Oval Image</h3>
			<img src="assets/imgs/site-imgs/img-24.jpg" class="rounded-circle" alt="Lighting" width="236" height="300"> 
			</div>
		</div>
	</div>	
		
	
Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.