macam macam tipe thumbnail

thumbnail

Diposting oleh: Admin Referensi Blog pada: Waktu On Line :kak:

telah di uji pada ruang posting dan di widget html/javascript [ bekerja ]
tinggal terapkan di html temlpate kalian .

• info
• BUKA FILE
  • html
  • css
• demo

catatan; pemakaian script yang banyak terkadang membuat kinerja widget yang lain jadi terganggu/error.

Compatible Browsers ;IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

<!--/////////////
All Black Caption - Image Start
/////////////-->
            
  <figure class="all-black">
    
    <img src="http://lorempixel.com/640/400/cats/1" alt="caption" />
      
    <figcaption>
    
     <h3>This is the second Caption</h3>
     
     <ul class="social">
      <li><a href="#"><span class="brandico-facebook"></span></a></li>
      <li><a href="#"><span class="brandico-twitter"></span></a></li>
      <li><a href="#"><span class="brandico-linkedin"></span></a></li>
      <li><a href="#"><span class="brandico-instagram"></span></a></li>
      <li><a href="#"><span class="brandico-github"></span></a></li>
     </ul>
    
    </figcaption>
  </figure>

<!--/////////////
Image End
/////////////-->
<br class="clear"/>


<!--/////////////
Circle Center Caption Image Start
/////////////-->
            

  <figure class="circle-center">
  
    <img src="http://lorempixel.com/640/400/cats/2" alt="caption" />
    
    <figcaption>
    
    <h3>This is the third Caption</h3>
    
    <ul class="social">
     <li><a href="#"><span class="brandico-facebook"></span></a></li>
     <li><a href="#"><span class="brandico-twitter"></span></a></li>
     <li><a href="#"><span class="brandico-linkedin"></span></a></li>
     <li><a href="#"><span class="brandico-instagram"></span></a></li>
     <li><a href="#"><span class="brandico-github"></span></a></li>
    </ul>
    
    
    </figcaption>
  </figure>


<!--/////////////
Image End
/////////////-->

<br class="clear"/>

<!--/////////////
Rotate Caption - Image Start
/////////////-->
            

  <figure class="rotate">
  
    <img src="http://lorempixel.com/640/400/cats/3" alt="caption" />
    
    <figcaption>
    
     <h3>The Fourth Caption is here!</h3>
     
     <p>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.</p>
    
     <ul class="social">
      <li><a href="#"><span class="brandico-facebook"></span></a></li>
      <li><a href="#"><span class="brandico-twitter"></span></a></li>
      <li><a href="#"><span class="brandico-linkedin"></span></a></li>
      <li><a href="#"><span class="brandico-instagram"></span></a></li>
      <li><a href="#"><span class="brandico-github"></span></a></li>
     </ul>
    
    
    </figcaption>
  </figure>

<br class="clear"/>

<!--/////////////
Image End
/////////////-->


<!--/////////////
All Black Caption - Image Start
/////////////-->
            
  <figure class="all-black">
    
    <img src="http://lorempixel.com/640/400/cats/1" alt="caption" />
      
    <figcaption>
    
     <h3>This is the second Caption</h3>
     
    
    </figcaption>
  </figure>

<!--/////////////
Image End
/////////////-->
<br class="clear"/>


<!--/////////////
Circle Center Caption Image Start
/////////////-->
            

  <figure class="circle-center">
  
    <img src="http://lorempixel.com/640/400/cats/5" alt="caption" />
    
    <figcaption>
    
    <h3>This is the third Caption</h3>
    
    
    </figcaption>
  </figure>


<!--/////////////
Image End
/////////////-->

<br class="clear"/>

<!--/////////////
Rotate Caption - Image Start
/////////////-->
            

  <figure class="rotate">
  
    <img src="http://lorempixel.com/640/400/cats/7" alt="caption" />
    
    <figcaption>
    
     <h3>The Fourth Caption is here!</h3>
     
     <p>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.</p>
    
    
    
    </figcaption>
  </figure>

<br class="clear"/>

<!--/////////////
Image End
/////////////-->

/*
This document is meant to be a Demo for the CSS Image Captions pack available on CodeCanyon 
http://codecanyon.net/item/pure-css3-captions/6813717
*/

@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700|Lily+Script+One|Voltaire);
@import url(http://weloveiconfonts.com/api/?family=brandico);

/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}


@charset "UTF-8";
/* CSS Document */


/* generic styles */

body{
height: 100%r;
 margin: 0;
background: rgb(181,189,200); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iIzgyOGM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-8 */
}

.clear{
 content:'';
 display: block;
 clear: both;
}


h1, h2{
 font-family: "Voltaire", sans-serif;
 text-align: center;
 color: white;
 text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}

/*If you need different settings, e.g. no floating, edit the following:*/



figure {
 margin: 10px;
 position: relative;
 cursor:pointer;
 overflow: hidden;
 z-index: 1;
 -webkit-box-shadow: 0 1px 3px #666;
 -moz-box-shadow: 0  1px 3px #666;
 box-shadow: 0  1px 3px #666; 
 width: 640px;
 margin: 30px auto;
 
}



/*///////*/



figcaption {
 font-family: 'News Cycle', sans-serif;
 position: absolute;
 display: block;
 white-space: nowrap;
 text-align: center;
 z-index: 2;
}

figcaption h3{
 font-family: 'Voltaire', sans-serif;
 font-weight: normal;
 font-size: 30px;
 text-shadow:  1px 1px 1px rgba(0,0,0,0.8),
     2px 2px 2px rgba(0,0,0,0.6),
     3px 3px 3px rgba(0,0,0,0.4),
     4px 4px 4px rgba(0,0,0,0.2),
     5px 5px 5px rgba(0,0,0,0.1);
}

figcaption p {
 line-height: 130%; 
}



/* sizes */


figure.big-square{
 width: 500px;
 height: 500px;
}


/* social icons generic style */

.social li{
 list-style-type: none;
 margin: 0; 
}

.social li a{
 text-decoration: none;
 width: 25px;
 height: 25px;
 line-height: 25px;
 display: block;
 background-color: #EEEEEE;
 margin: 5px 0 0 0;
 border-radius: 999px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 text-align: center;
}

.social li a span{
 font-size: 16px;
 color: #666;
}

.social li a:hover {
 background-color:#FFF;
}

.social li a:hover span{
 color: #000;
}


/* bottom blur style */

figure.bottom-blur figcaption {
 text-align: center;
 color: rgba(255,255,255,1);
 background-color: rgba(0,0,0,0.5);
 border: 4px solid rgba(253,245,253,0.7);
 width: 105%;
 line-height: 150%;
 position: absolute;
 bottom: 5%;
 left: 0;
 right:0;
 font-size: 20px;
 opacity: 0;
 box-shadow: #000 0 0 15px;
 
 transform: scale(4,4);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}

figure.bottom-blur:hover figcaption {
 opacity: 1;
 left: -2%;
 transform:scale(1,1);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}

.figure.bottom-blur .social {
 display: block;
}

figure.bottom-blur .social li{
 float: right;
 margin: 0 40px 0 0;
}

figure.bottom-blur .social:after{
 display: block;
 clear: both;
 content:'';
}

/* All black style */

figure.all-black figcaption {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0;
 height: 0;
 text-align: center;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 font-size: 20px;
 opacity: 0;
 
 transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg) scale(0,0);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}

figure.all-black:hover figcaption {
 width: 100%;
 height: 100%;
 opacity: 1; 
 transform: rotate(0deg) scale(1,1);
 -moz-transform: rotate(0deg) scale(1,1);
 -o-transform: rotate(0deg) scale(1,1);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;

}

figure.all-black h3, figure.circle-center h3, figure.big-circle h3{
 font-family: 'Lily Script One', cursive;
 display: block;
 position: absolute;
 height: 30px;
 margin: auto;
 top: 0;
 right:0;
 bottom: 0;
 left: 0;
}

figure.all-black .social {
 position: absolute;
 display: block;
 bottom: 10px;
 right: 20px;
}

figure.all-black .social li{
 margin: 10px 0 0 0;
}

figure.all-black .social:after{
 display: block;
 clear: both;
 content:'';
}


/* circle center style */

figure.circle-center figcaption {
 position: absolute;
 display: block;
 width: 65%;
 height: 65%;
 left: 0;
 right: 0;
 margin: auto;
 top: -100%;
 text-align: center;
 color: #fff;
 background-color: rgba(222,222,222,0.6);
 font-size: 20px;

 transform: rotate(60deg);
 -o-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 border-radius: 999px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 box-shadow: #000 0 4px 8px;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}

figure.circle-center:hover figcaption {
 top: 0;
 bottom: 0;
 transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 -moz-transform:rotate(-30deg);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
 -moz-box-shadow:    inset 0 0 10px #000000;
 -webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow:         inset 0 0 10px #000000;
}

figure.circle-center h3{
 color: black;
 text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

figure.circle-center img{
 transform: zoom(1,1) translateX(0);
 -webkit-transform: zoom(1,1) translateX(0);
 -moz-transform:zoom(1,1) translateX(0);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}

figure.circle-center:hover img{
 transform: scale(1.2,1.2);
 -webkit-transform: scale(1.2,1.2);
 -moz-transform:scale(1.2,1.2);
 -webkit-transition: all 1s ;
 -moz-transition: all 1s;
 transition: all 1s;
}

figure.circle-center .social, figure.big-circle .social {
 position: absolute;
 display: block;
 margin: 0 auto;
 bottom: 20%;
 width: 80%;
}


figure.big-circle .social {
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform:rotate(30deg);
}

figure.circle-center .social li, figure.big-circle .social li{
 float: left;
 margin: 0 10px 0 10px;
}

figure.circle-center .social:after, figure.big-circle .social:after{
 display: block;
 clear: both;
 content:'';
}



/* rotate style */


figure.rotate {
 -webkit-transition: all 300ms ease-out;
 -moz-transition: all 300ms ease-out;
 -o-transition: all 300ms ease-out;
 -ms-transition: all 300ms ease-out; 
 transition: all 300ms ease-out;
}

figure.rotate:hover {
 background-color: rgba(0,0,0,1) !important;
}


figure.rotate figcaption {
 width: 100%;
 height: 100%;
 line-height: 110%; 
 text-align: left;
 background-color: rgba(0,0,0,0.5);
 -moz-transform: rotate(-180deg) translateX(-800px);
 -o-transform: rotate(-180deg) translateX(-800px);
 -webkit-transform: rotate(-180deg) translateX(-800px);
 transform: rotate(-180deg) translateX(-800px);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
 color: white;
 white-space: initial;
 -moz-box-shadow:    inset 0 0 10px #000000,
      1px 1px 1px #000000,
      2px 2px 2px #000000,
      3px 3px 3px #000000;
 -webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow:         inset 0 0 10px #000000;
}

figure.rotate:hover figcaption{
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 -moz-transform: rotate(0deg) translateX(0);
 -o-transform: rotate(0deg) translateX(0);
 -webkit-transform: rotate(0deg) translateX(0);
 transform: rotate(0deg) translateX(0);
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
 
}

figure.rotate figcaption p, figure.rotate figcaption h3{
 margin: 30px;
}

http://codecanyon.net/item/pure-css3-captions/full_screen_preview/6813717

---

• Edit post
• daftar posting
• komentar
• sign out
• sign in