CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Introduction

Image plugin comprises collection of useful image related tricks usually used to style image in a more appealing way without resorting to Javascript.

The plugin enables border around image, alters the original size and apply new change such as circle and rounded, creation of caption effect, hover effects, transition and animation and many more fantastic tricks courtesy of the image plugin.

Image - Size

The class below shows the available image size class that are ready to use, with this in place, original image size can be altered by increasing or decreasing the size of the image.

Note Target image width (the original image width) must always be larger or bigger otherwise, the image might loss some quality, if new class property larger than it is applied

Image size classes Definition
Ready to use image classes.
image75 75px wide (The target image width is assumed to be greater)
image100 100px wide (The target image width is assumed to be greater)
image120 120px wide (The target image width is assumed to be greater)
image160 160px wide (The target image width is assumed to be greater)
image220 220px wide (The target image width is assumed to be greater)
image320 320px wide (The target image width is assumed to be greater)
image460 460px wide (The target image width is assumed to be greater)
image800 800px wide (The target image width is assumed to be greater)
image1024 1024px wide (The target image width is assumed to be greater)

Applying image size class

The image class only apply changes to the width of the target image and thus adjust to its corresponding vertical height automatically.

image 75px image 105px image 240px image 320px

 
  <p>
	<img src="../images/portfolio/infography_which_argumentative_to_make.png" class="image75"/>
	<img src="../images/portfolio/infography_which_argumentative_to_make.png" class="image100"/>
	<img src="../images/portfolio/infography_which_argumentative_to_make.png" class="image240"/>  
	<img src="../images/portfolio/infography_which_argumentative_to_make.png" class="image320"/> 
  </p>
    

Image - Styles

Basic image

Rounded corner image

Rounded image using rounded class.

 
    <img src="../images/portfolio/logo/cushion-09.png" class="rad-all-sma"/>
    

Circle image

Display in circle using shape class.

 
    <img src="../images/portfolio/logo/cushion-09.png" class="circle" />
    

Image Card

Displaying image as a card.

 
           <div class="row">
            <div class="g16-c-3">
             <div class="card-imageCaption">
              <header class="color-set-alizarinCrimson">
                <img src="../images/portfolio/logo/britappliabces-34.png" />
              </header>
              <footer class="color-set-white">
                 <a href="#" class="button ">Learn more</a> 
              </footer>
             </div>
            </div>
            <div class="g16-c-3">
             <div class="card-imageCaption">
              <header class="color-set-alizarinCrimson">
                <img src="../images/portfolio/logo/britappliabces-34.png" />
              </header>
              <footer class="color-set-white">
                 <a href="#" class="button ">Learn more</a> 
              </footer>
             </div>
            </div>
           <div class="g16-c-3">
             <div class="card-imageCaption">
              <header class="color-set-alizarinCrimson">
                <img src="../images/portfolio/logo/britappliabces-34.png" />
              </header>
              <footer class="color-set-white">
                 <a href="#" class="button ">Learn more</a> 
              </footer>
             </div>
            </div>
          </div>
    

Image Border

Adding border to image with border class with a slight padding property.


 
 
    <img src="../images/portfolio/logo/cushion-09.png" class="rad-all-sma  border-all-xxs padding-all-xxs"/>
    

Link image

Clickable image is possible using a hypertext link and assign the same image source to the href attribute.

 
    <a href="../images/portfolio/logo/cushion-09.png" target="_self">
       <img src="../images/portfolio/logo/cushion-09.png" 
               class="rad-all-sma  border-all-xxs padding-all-xxs" 
               alt="" title="" />
    </a>
    

Image - Effects

Opacity

Opacity can be set to any image using opacity class to create transparency.


 
 
    <img src="../images/portfolio/logo/cushion-09.png" class="opacity-3"/>
    <img src="../images/portfolio/logo/cushion-09.png" class="opacity-5"/>
    <img src="../images/portfolio/logo/cushion-09.png" class="opacity-8"/>

Image filters

The CSS filter effects alters typical web image contents without having it edited in photoshop.

Grayscale filter effect

This type of effect convert color images from 0%, the original color status to 100% grayscale (black and white) rather than using a complex javascript or flash techniques. The effect is ideal for online portfolios or photographic galleries


 
 
    <div class="filter-grayscale">
      <img src="../images/portfolio/logo/musicworld-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Sepia filter effect

This type of effect is used to create an aged photo effect.


 
 
    <div class="filter-sepia">
      <img src="../images/portfolio/logo/musicworld-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Polaroid filter effect

This effect takes on the combination of filter and a box-shadow with an inset to mimic the appearance of polaroid photograph. It transitions from the polaroid image to the original default status on hover.


 
 
    <div class="filter-polaroid">
      <img src="../images/portfolio/logo/fishythrills-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Blur filter effect

Blur effect does not take value from 0% to 100% as other filters do, it takes a unit length for its measurement that determines the extent to which blur would spread when applied. The value may be 1px,3px 5px and even more, but care must be taken when assigning value as larger value may result in legibilty problem leading to difficulty in viewing the affected image.

Default value used is 1px.


 
 
    <div class="filter-blur">
      <img src="../images/portfolio/logo/fishythrills-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Invert filter effect

This effect completely invert the original color image.


 
 
    <div class="filter-invert">
      <img src="../images/portfolio/logo/fishythrills-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Saturate filter effect

This effect intensifies and saturates the color of an image. The value 100% signifies the original default image and value below this is the saturation level. The default saturation value assigned to below images is 50%, and when hover it turns to 100% of the original image.


 
 
    <div class="filter-saturate">
      <img src="../images/portfolio/logo/fishythrills-18.png" 
              class="rad-all-sma  border-all-xxs padding-all-xxs" />
    </div>

Image Animation & Transition

G16framework uses the transition techniques offer in CSS3 to create different transition effects that may be used to show more information about an image such as caption.

The most appropriate html element such as figure, figcaption may be the best candidate to display image and caption.

Hover Effect

Note: Image of the same size in height and width must be used to achieve the best transition effect when mouse over. View all the size class.

Tiny Medium Image

Tiny Medium Image


 
    <div class="group">
     <div class="g16-c-2">
	     <div class="image-caption">
		     <figure class="size300px">
			     <img src="../images/portfolio/logo/fishythrills.png" alt="">
			     <figcaption>
				    <h3>Tiny Medium Image</h3>
				    <p>
				     <button type="button" 
				       class="button color-set-appleBlossom">View cart
				     </button></p>
			     </figcaption>
		     </figure>
	     </div>
     </div>
      <div class="g16-c-2">
	      <div class="image-caption">
		      <figure class="size300px">
			      <img src="../images/portfolio/logo/olecindesign-05-05.png" alt="">
			      <figcaption>
				      <h3>Tiny Medium Image</h3>
				      <p><button type="button" 
				       class="button color-set-appleBlossom">View cart
				      </button></p>
			      </figcaption>
		      </figure>
	      </div>
      </div>
    </div> 

Flip Effect

Class identifier
image-hoverFlip flip back front

Note: Image of the same size in height and width must be used to achieve the best flip transition effect when mouse over.

The flip hover effect requires at least two images to showcase the back image when flipped in transition and a front and back must be assigned to front and back image class attribute respectively.

This type of effect works well if item to be displayed has more than one features such as t-shirt or gift items.

front face back face
front face back face

 
 
    <div class="group">
	    <div class="g16-c-2">
		    <div class="image-hoverFlip size300px height-300">
			    <figure class="flip">
				    <img src="../images/portfolio/logo/maxysound-19.png" 
                            class="front"  alt="front face" />
				    <img src="../images/portfolio/logo/micaelectric-26.png" 
                            class="back" alt="back face" />
			    </figure>
		    </div>
	    </div>
	    <div class="g16-c-2">
		    <div class="image-hoverFlip  size300px height-300">
			    <figure class="flip">
				    <img src="../images/portfolio/logo/rayrealtor-06.png" 
                            alt="front face" class="front" />
				    <img src="../images/portfolio/logo/simpsonalison-20.png" 
                            class="back" alt="back face" />
			    </figure>
		    </div>
	    </div>
   </div>

Translate Effect

Class identifier
image-translate3D

Translate 3d view effect makes object a little bigger or larger when hover with a sleek perspective effect.

translate
Show this
translate
Show this

 
 
    <div class="group">
	    <div class="g16-c-2">
		    <div class="image-translate3D size300px height-300">
			    <figure class="flip"> 
				    <img src="../images/portfolio/logo/micaelectric-26.png" 
                             alt="back face" />
                        <figcaption class="color-set-alizarinCrimson">
                        Show this
                        </figcaption>
			    </figure>
		    </div>
	    </div>
	    <div class="g16-c-2">
		    <div class="image-translate3D  size300px height-300">
			    <figure class="flip">
				    <img src="../images/portfolio/logo/simpsonalison-20.png" 
                         alt="back face" />
                        <figcaption class="color-set-alizarinCrimson">
                        Show this
                        </figcaption>
			    </figure>
		    </div>
	    </div>
   </div>

Thumbnail Effect

Class identifier
image-thumbview thumbviewcaption

This class is applied to image to create a smaller preview version of the original image when hover, it translates to the bigger view of its main image. There are two versions, thumbnail with caption and without caption.

Thumbnail Preview

Two images of the same source with different size is required to create a thumbnail, a size class is applied to the smaller image source to create a considerable thumbview size image.

Sample Code

 
    <div class='image-thumbview g16-c-2'>
    <!-- thumbnail image -->
    <img src="../images/portfolio/infography/warning_signs-09.png" class="size200px" />
    <!-- Scaled Up Image -->
    <span class="bigview">
	    <img class='size500px' src="../images/portfolio/infography/warning_signs-09.png" />
    </span>
    </div>

Thumbnail with Caption

Caption is created by supplying contents to alt attribute within a span element.

Sample Code

 
        <div class='image-thumbview'>
	        <!-- thumbnail image -->
	        <img src="../images/portfolio/infography/who_said_that-01.png" class="size200px" />
	        <!-- Scaled Up Image With Caption -->
	        <span class='thumbcaption bigview' alt='An Infography Descriptive Content'>
		        <img  src="../images/portfolio/infography/who_said_that-01.png" />
	        </span>
        </div>

Image Hover

This class consists of four different hover in transition effects to display corresponding image contents when mouse over it.

Image Hover zoom

Class identifier
image-hover-zoom

The power of css and html

The best thing money can buy

Sample Code

 
            <div class="image-hover-zoom">
                <figure class="g16-c-2">
                <img src="../images/portfolio/fliers/flyers_zfold.png" />
                <figcaption>
                    <h2>The power of css and html</h2>
                    <div>
                        <p>
                            The best thing money can buy
                        </p>
                    </div>
                </figcaption>
                </figure>            
            </div>

Image Hover vertically translated

Class identifier
image-hover-translateY

The power of css and html

The best thing money can buy

Sample Code

 
            <div class="image-hover-translateY">
                <figure>
                <img src="../images/portfolio/fliers/z-fliers2.png" />
                <figcaption>
                    <h2>The power of css and html</h2>
                    <div>
                        <p>
                            The best thing money can buy
                        </p>
                    </div>
                </figcaption>
                </figure>            
            </div>

Image Hover horizontally translated

Class identifier
image-hover-translateX

Regal Terrain

Sample Code

 
 <div class="image-hover-translateX">
  <figure class="color-set-bahamaBlue" >
   <img src="../images/portfolio/fliers/z-fliers2.png" />
    <figcaption>
     <h2>The power of css and html</h2>
	   <div>
		<p>
		<span>
		<a href="" class="icon icon-behance medium color-text-white"></a>
		</span>
		<span>
		<a href="" class="icon icon-file-openoffice medium color-text-white"></a>
		</span>
		<span><a href="" class="icon icon-google-drive medium color-text-white"></a>
		</span>
		</p>
     </div>
    </figcaption>
  </figure>            
 </div>

Image Hover Circular Translate

Class identifier
image-hover-translateCircle

Bradwith Terrain

Sample Code

 
            <div class="image-hover-translateCircle">
                <figure class="g16-c-2">
                <img src="../images/portfolio/fliers/z-fliers2.png" />
                <figcaption>
                      <!-- Caption -->
                    <h2>The power of css and html</h2>
                    <div>
                      <!-- Icons -->
                        <p>
                        <span><a href="" class="icon icon-behance color-set-white "></a></span>
                        <span><a href="" class="icon icon-file-openoffice color-set-white"></a></span>
                        <span><a href="" class="icon icon-google-drive color-set-white"></a></span>
                        </p>
                    </div>
                </figcaption>
                </figure>            
            </div>

Image Hover Rectangular Translate

Class identifier
image-hover-translateSquare

Regal Terrain

The best thing money can buy, free for all.

Sample Code

 
            <div class="image-hover-translateSquare">
                <figure>
                <img src="../images/portfolio/fliers/z-fliers2.png" />
                <figcaption>
                    <h2>The power of css and html</h2>
                    <div>
                        <p>
                            The best thing money can buy
                        </p>
                    </div>
                </figcaption>
                </figure>            
            </div>

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.