tFigure - Image Captions

Make your site beautiful


Small collection of 5 CSS-only animated Image Captions.
This kit stuff will save you a lot of time when creating websites! They’re really easy to use and have very nice interfaces. Enjoy!

Advantages:
- Easy to install on any site.
- Supports all versions of browsers.
- Easily customize yourself.

Hey, now I will tell you how to connect to your site Image Captions, first let's connect stylesheet file, insert this code between the tags <head>...</head>:

<link href="css/figure.css" rel="stylesheet" type="text/css">

if you select tFigure#1 wiht description use this code:

Green:

<figure class="block-1">
     <div class="thumbs">
          <a href="*LINK*" class="btn">readmore</a>
	  <img src="*LINK TO IMG*"/>
     </div>
     <figcaption>
          <span>*DESCRIPTION*</span>
     </figcaption>
</figure>

Blue:

<figure class="block-2">
     <div class="thumbs">
          <a href="*LINK*" class="btn">readmore</a>
	  <img src="*LINK TO IMG*"/>
     </div>
     <figcaption>
          <span>*DESCRIPTION*</span>
     </figcaption>
</figure>

Orange:

<figure class="block-3">
     <div class="thumbs">
          <a href="*LINK*" class="btn">readmore</a>
	  <img src="*LINK TO IMG*"/>
     </div>
     <figcaption>
          <span>*DESCRIPTION*</span>
     </figcaption>
</figure>

Red:

<figure class="block-4">
     <div class="thumbs">
          <a href="*LINK*" class="btn">readmore</a>
	  <img src="*LINK TO IMG*"/>
     </div>
     <figcaption>
          <span>*DESCRIPTION*</span>
     </figcaption>
</figure>

if you select tFigure#2 wihout description use this code:

Green:

<figure class="fill-1">
	<div class="thumbs">
	   <a href="*YOUR LINK*" class="btn">readmore</a>
	<img src="*YOUR LINK IMG*"/>
	</div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	</figcaption>
</figure>

Blue:

<figure class="fill-2">
	<div class="thumbs">
	   <a href="*YOUR LINK*" class="btn">readmore</a>
	<img src="*YOUR LINK IMG*"/>
	</div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	</figcaption>
</figure>

Orange:

<figure class="fill-3">
	<div class="thumbs">
	   <a href="*YOUR LINK*" class="btn">readmore</a>
	<img src="*YOUR LINK IMG*"/>
	</div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	</figcaption>
</figure>

Red:

<figure class="fill-4">
	<div class="thumbs">
	   <a href="*YOUR LINK*" class="btn">readmore</a>
	<img src="*YOUR LINK IMG*"/>
	</div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	</figcaption>
</figure>

if you select tFigure#3 wihout description use this code:

Green:

<figure class="x-1">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span> 
          <img src="*YOUR LINK IMG*"/> 
     </div> 
     <figcaption> 
          <span class="fill"></span>
          <span class="fill"></span>
     </figcaption> 
</figure>

Blue:

<figure class="x-2">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span> 
          <img src="*YOUR LINK IMG*"/> 
     </div> 
     <figcaption> 
          <span class="fill"></span>
          <span class="fill"></span>
     </figcaption> 
</figure>

Orange:

<figure class="x-3">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span> 
          <img src="*YOUR LINK IMG*"/> 
     </div> 
     <figcaption> 
          <span class="fill"></span>
          <span class="fill"></span>
     </figcaption> 
</figure>

Red:

<figure class="x-4">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span> 
          <img src="*YOUR LINK IMG*"/> 
     </div> 
     <figcaption> 
          <span class="fill"></span>
          <span class="fill"></span>
     </figcaption> 
</figure>

if you select tFigure#4 wihout description use this code:

Green:

<figure class="cube-1">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span>
          <img src="*YOUR LINK IMG*"/>
     </div>
     <figcaption>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
    </figcaption>
</figure>

Blue:

<figure class="cube-2">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span>
          <img src="*YOUR LINK IMG*"/>
     </div>
     <figcaption>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
    </figcaption>
</figure>

Orange:

<figure class="cube-3">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span>
          <img src="*YOUR LINK IMG*"/>
     </div>
     <figcaption>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
    </figcaption>
</figure>

Red:

<figure class="cube-4">
     <div class="thumbs">
          <span class="rotate">
               <a href="*YOUR LINK*" class="btn">readmore</a>
          </span>
          <img src="*YOUR LINK IMG*"/>
     </div>
     <figcaption>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
          <span class="fill"></span>
    </figcaption>
</figure>

if you select tFigure#5 wihout description use this code:

Green:

<figure class="matte-1">
     <div class="thumbs">
	<span class="rotate">
	     <a href="*YOUR LINK*" class="btn">readmore</a>
	</span>
	<img src="*YOUR LINK IMG*"/>
     </div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
        </figcaption>
</figure>

Blue:

<figure class="matte-2">
     <div class="thumbs">
	<span class="rotate">
	     <a href="*YOUR LINK*" class="btn">readmore</a>
	</span>
	<img src="*YOUR LINK IMG*"/>
     </div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
        </figcaption>
</figure>

Orange:

<figure class="matte-3">
     <div class="thumbs">
	<span class="rotate">
	     <a href="*YOUR LINK*" class="btn">readmore</a>
	</span>
	<img src="*YOUR LINK IMG*"/>
     </div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
        </figcaption>
</figure>

Red:

<figure class="matte-4">
     <div class="thumbs">
	<span class="rotate">
	     <a href="*YOUR LINK*" class="btn">readmore</a>
	</span>
	<img src="*YOUR LINK IMG*"/>
     </div>
	<figcaption>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
	    <span class="fill"></span>
        </figcaption>
</figure>
http://www.20script.ir