Images

LinGeo Templates are full of eye catching features which are used in our Themes. Here are 4 more ideas for image enhancement you can incorporate into your site.

With some of these features there may be a conflict with other features. Make special note of the comments for each and be sure to read the instructions, before adding any of them to your pages.

LightBox

An alternative method to enlarge images. No javascript is required as with FancyBox. LightBox Plus accomadates 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

Code data-lightbox="single-1"

Enlarge Images in a Group

Rit eget tincidunt

Tempor sit amet

Vestibulum erat

Donec iaculis

Code data-lightbox="group"

Odd Number of Images

The following classes applied to any .row elements allowing you to control the horizontal alignment of columns in a grid, giving all the images the same size.
Code 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

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>
	
	
See the BS LinGeo page for Card Flip Examples

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.

View code example
	
<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/img/site-images/img-01.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/img/site-images/img-02.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/img/site-images/img-03.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/img/site-images/img-04.jpg" alt="Project 1" class="img-fluid" />
</div>
	
	
New

Ole' Mill

Project 1
On Sale

Fog Sets In

Project 1
Popular

Boardwalk

Project 1
Best Value

Harvest Time

Project 1

Offset Ribbons

Ribbons add emphasis to an item.

View code example
	
<div class="row products">
	<div class="col-sm-6">
		<div class="small-content-box">
			<div class="image">
				<a href="#">
					<img src="assets/img/site-images/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>

		<div class="col-sm-6">
			<div class="small-content-box">
				<div class="image">
					<a href="#">
						<img src="assets/img/site-images/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>

			<div class="col-sm-6">
				<div class="small-content-box">
					<div class="image">
						<a href="#">
							<img src="assets/img/site-images/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>

		<div class="col-sm-6">
			<div class="small-content-box">
				<div class="image">
					<a href="#">
						<img src="assets/img/site-images/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>
</div>
	
	
SALE
New
Special
Gift Idea
Clearance Item

Overlay

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

View code example
	
<div class="row products">
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 img-fluid">
    <div class="ad-over mb-3">
	 <img class="ad-over-lrg-img" src="assets/img/site-images/img-09.jpg" class="img-fluid">
	 <img class="ad-over-sml-img" src="assets/img/ecomm-images/sale-lrg.png" />
    </div>
  </div>

<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 img-fluid">
  <div class="ad-over mb-3">
    <img class="ad-over-lrg-img" src="assets/img/site-images/img-10.jpg" class="img-fluid">
    <img class="ad-over-left-top-sml-img" src="assets/img/ecomm-images/img-19-sml.png" />
  </div>
</div>
		</div>
	</div>
</div>
	
<div id="content">
  <div class="container mb-5">
    <div class="row products">
	<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 img-fluid">
	 <div class="ad-over mb-3">
	  <img class="ad-over-lrg-img" src="assets/img/site-images/img-11.jpg" class="img-fluid">
	  <img class="ad-over-right-sml-img" src="assets/img/ecomm-images/gift.png" />
  </div>
</div>
		
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 img-fluid">
  <div class="ad-over-left mb-3">
    <img class="ad-over-left-lrg-img" src="assets/img/site-images/img-12.jpg" class="img-fluid">
    <img class="ad-over-left-bottom-sml-img" src="assets/img/ecomm-images/sale-bottom-left.png" />
  </div>
</div>
	
	

Overlay with Text & Link

View code example
	 
<div class="overlay-hover-content overlay-op-5">
  <h4 class="text-white">
    Wild Mustang Images
  </h4>
  <a href="#" class="btn btn-default-lgt text-uppercase font-weight-bold mb-2"><i class="fa 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/img/site-images/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>
		  

Rock Formation

View All
Card image cap

Album #1

Image Shapes

Using Bootstrap's rounded-circle can be a bit tricky if the image is not square. We've shown how to modify an image to not have distortion in the LinGeo Instructions.

Round Image

User

Horizontal Oval Image

Peacock

Vertical Oval Image

User