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>