Image Frames

Add frames to your images

CSS/JS files (add code to <HEAD> section):


<!-- DC Image Frames CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/image_frames/css/tsc_image_frames.css" />

Video icon / Pin / Transparent Tape

View code:

  
<!-- Video Frame -->
<div class="tsc_decor_img"><a href="#"><span></span><img src="http://pimg.co/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div> 
<!-- Pin Frame  -->
<div class="tsc_decor_img tsc_dis_1"><a href="#"><span></span><img src="http://pimg.co/p/300x200/666666" width="300" height="200" alt="image" /></a></div> 
<!-- Transparent Tape Frame  -->
<div class="tsc_decor_img tsc_dis_2"><a href="#"><span></span><img src="http://pimg.co/p/300x200/333333" width="300" height="200" alt="image" /></a></div> 
<div class="tsc_clear"></div> <!-- line break/clear line -->

Paper Clip / Tape / Gold Frame

View code:


<!-- Paper Clip Frame -->
<div class="tsc_decor_img tsc_dis_3"><a href="#"><span></span><img src="http://pimg.co/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div>
<!-- Tape Frame -->
<div class="tsc_decor_img tsc_dis_4"><a href="#"><span></span><img src="http://pimg.co/p/300x200/666666" width="300" height="200" alt="image" /></a></div>
<!-- Gold Frame -->
<div class="tsc_decor_img tsc_dis_5"><a href="#"><span></span><img src="http://pimg.co/p/300x200/333333" width="300" height="200" alt="image" /></a></div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Cut Corner / Round Corner 1 / Round Corner 2

View code:


<!-- Cut Corner Frame -->
<div class="tsc_decor_img tsc_dis_6"><a href="#"><span></span><img src="http://pimg.co/p/300x200/cccccc" width="300" height="200" alt="image" /></a></div>
<!-- Round Corner 1 Frame -->
<div class="tsc_decor_img tsc_dis_7"><a href="#"><span></span><img src="http://pimg.co/p/300x200/666666" width="300" height="200" alt="image" /></a></div>
<!-- Round Corner 2 Frame -->
<div class="tsc_decor_img tsc_dis_8"><a href="#"><span></span><img src="http://pimg.co/p/300x200/333333" width="300" height="200" alt="image" /></a></div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Stamp / Brush / Floral

View code:


<!-- Stamp Frame -->  
<div class="tsc_decor_img tsc_dis_9"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/cccccc" width="300" height="200" alt="image" /></a> </div>
<!-- Brush Frame -->
<div class="tsc_decor_img tsc_dis_10"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/666666" width="300" height="200" alt="image" /></a> </div>
<!-- Floral Frame -->
<div class="tsc_decor_img tsc_dis_11"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/333333" width="300" height="200" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Watercolor / Mask / Glossy

View code:


<!-- Watercolor Frame --> 
<div class="tsc_decor_img tsc_dis_12"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/cccccc" width="300" height="200" alt="image" /></a> </div>
<!-- Mask Frame --> 
<div class="tsc_decor_img tsc_dis_13"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/666666" width="300" height="200" alt="image" /></a> </div>
<!-- Glossy Frame --> 
<div class="tsc_decor_img tsc_dis_14"> <a href="#"><span></span><img src="http://pimg.co/p/300x200/333333" width="300" height="200" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Large Video / Large Pin

View code:


<!-- Large Video Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_0"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Pin Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_1"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Large Tape / Large Paper Clip

View code:


<!-- Large Tape Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_2"><a href="#"><span></span><img src="http://pimg.co/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Paper Clip Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_3"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Large Yellow Tape / Large Gold Frame

View code:


<!-- Large Yellow Tape Frame -->
<div class="tsc_decor_img_360 tsc_dis_360_4"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Gold  Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_5"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->

Large Cut Corner / Large Round Corner

View code:


<!-- Large Cut Corner  Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_6"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/cccccc" width="360" height="260" alt="image" /></a> </div>
<!-- Large Round  Frame --> 
<div class="tsc_decor_img_360 tsc_dis_360_7"> <a href="#"><span></span><img src="http://pimg.co/p/360x260/666666" width="360" height="260" alt="image" /></a> </div>
<div class="tsc_clear"></div> <!-- line break/clear line -->