BLOG POST THUMBNAILS WITH COVER EFFECT

Wednesday, 7 May 2014

BLOG POST THUMBNAILS WITH COVER EFFECT

-----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
-----------------------------------------------------------------------------------------------------------

<html>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH COVER EFFECT
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

a:link{color:#4E4E4E;text-decoration:none}
a:visited{color:#999999;text-decoration:none}
a:hover{color:#0C0C0C;text-decoration:none}
a img{border-width:0}

/* Posts
-----------------------------------------------
*/
.date-header{display:none}
.post{overflow:hidden;position:relative}
.post h1,.post h2{margin:0;padding:0 0 4px;font-weight:normal;line-height:1.4em;color:#141414;margin-bottom:15px}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#141414;font-weight:normal}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#333333}
.post-body{margin:0 0 .75em;line-height:1.6em}
.post-body blockquote{line-height:1.3em}
.post-footer{margin:.75em 0;color:#999999;text-transform:uppercase;letter-spacing:.1em;font:normal normal 78% Cuprum;line-height:1.4em}
.comment-link{margin-left:.6em}
.post img,table.tr-caption-container{border:1px solid #cccccc}
.tr-caption-container img{border:none;padding:0}
.post blockquote{margin:1em 20px;margin-left:0;padding-left:35px;font-style:italic;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzxcYiStUGmMMH9oQ2rzU0-42bV6vhjFbhlt_QNoB6nLydIKgt9A_wYAdZiGDzC4yRcXd_xipJE4TJNLB5ERJBbOt4CDzXBGoZDX9IZzKR7qjzRg17OOkMWghum5TF3kpAq2jxeWfJBc/s30/bq.png);background-repeat:no-repeat}
.post blockquote p{margin:.75em 0}

.post-body ul,.post-body ol{margin:10px 0 10px 20px}
.post-body h1{font-size:200%;margin:10px 0}
.post-body h2{font-size:180%;margin:10px 0}
.post-body h3{font-size:160%;margin:10px 0}
.post-body h4{font-size:140%;margin:10px 0}
.post-body h5{font-size:120%;margin:10px 0}
.post-body h6{font-size:110%;margin:10px 0}
a.blog-pager-newer-link{display:block;width:32px;height:32px;text-indent:-9999px;margin-left:10px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEm44mKffCehMhzmVfWBMM-TGmD6_JMYjyIOBo3X1HVeMYnBZzj8GubJHt4t6jT8lwtTd2fsPWDHzOBdxXEgJ85dFMWErExygBTmsAbxvBAMi6qZfsT1nneq0uZ4h5d7GT606UXevctwg/s1600/back.png)}
a.home-link{display:block;width:32px;height:32px;margin:0 auto;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMC464nzNodck3M2tHvq9mRdSYtVSzcLIsnPPKpIq2Vto4YRPYbZqt0hIMb_rfEnCutHLcrL2zwDj5o4Ritp3oMuj-N9kZZL1getpLh739kY8Tc2RK10Ypoi_7CmGRBhLhpQybxCIAAg/s1600/home.png);text-indent:-9999px}
a.blog-pager-older-link{display:block;width:32px;height:32px;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkdbKib8JQKQZhh1JShbnt3NQr8DgsYh5YZTHWz_8IeQc2xdPPggyi_41PQFakX87fWGGGOKwqq97j5el_BI6LvSd8QiStsnTkW9ycw5Il8XczSXtXmZ-wS1ZUqOU9xqLwks0pbB-BN8/s1600/next.png)}
a.home-link,a.blog-pager-older-link,a.blog-pager-newer-link{-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;opacity:0;filter:alpha(opacity=0)}
#main-wrapper:hover a.home-link,#main-wrapper:hover a.blog-pager-older-link,#main-wrapper:hover a.blog-pager-newer-link{opacity:1;filter:alpha(opacity=100)}
.post-body ul,.post-body ol{margin:10px 0 10px 20px}
.post-body ul.slides{margin:0}
.post-body h1{font-size:200%;margin:10px 0}
.post-body h2{font-size:180%;margin:10px 0}
.post-body h3{font-size:160%;margin:10px 0}
.post-body h4{font-size:140%;margin:10px 0}
.post-body h5{font-size:120%;margin:10px 0}
.post-body h6{font-size:110%;margin:10px 0}
a.blog-pager-newer-link{display:block;width:32px;height:32px;text-indent:-9999px;margin-left:10px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEm44mKffCehMhzmVfWBMM-TGmD6_JMYjyIOBo3X1HVeMYnBZzj8GubJHt4t6jT8lwtTd2fsPWDHzOBdxXEgJ85dFMWErExygBTmsAbxvBAMi6qZfsT1nneq0uZ4h5d7GT606UXevctwg/s1600/back.png)}
a.home-link{display:block;width:32px;height:32px;margin:0 auto;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMC464nzNodck3M2tHvq9mRdSYtVSzcLIsnPPKpIq2Vto4YRPYbZqt0hIMb_rfEnCutHLcrL2zwDj5o4Ritp3oMuj-N9kZZL1getpLh739kY8Tc2RK10Ypoi_7CmGRBhLhpQybxCIAAg/s1600/home.png);text-indent:-9999px}
a.blog-pager-older-link{display:block;width:32px;height:32px;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkdbKib8JQKQZhh1JShbnt3NQr8DgsYh5YZTHWz_8IeQc2xdPPggyi_41PQFakX87fWGGGOKwqq97j5el_BI6LvSd8QiStsnTkW9ycw5Il8XczSXtXmZ-wS1ZUqOU9xqLwks0pbB-BN8/s1600/next.png)}
a.home-link,a.blog-pager-older-link,a.blog-pager-newer-link{-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;opacity:0;filter:alpha(opacity=0)}
#main-wrapper:hover a.home-link,#main-wrapper:hover a.blog-pager-older-link,#main-wrapper:hover a.blog-pager-newer-link{opacity:1;filter:alpha(opacity=100)}
.post-body ul,.post-body ol{margin:10px 0 10px 20px}
.post-body h1{font-size:200%;margin:10px 0}
.post-body h2{font-size:180%;margin:10px 0}
.post-body h3{font-size:160%;margin:10px 0}
.post-body h4{font-size:140%;margin:10px 0}
.post-body h5{font-size:120%;margin:10px 0}
.post-body h6{font-size:110%;margin:10px 0;}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post{float:left;position:relative;overflow:hidden}
.post-body p{position:absolute;left:-9999px}
.post img{height:205px;border:0}
.post .entry-link{display:block;height:205px}
.post:hover .overlay{opacity:1;display:block;filter:alpha(opacity=100)}
.post .overlay{-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;display:block;opacity:0;filter:alpha(opacity=0)}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:black;background:rgba(0,0,0,.9);z-index:99}
.overlay h2{width:90%;padding:0 5%;color:white;margin-bottom:2px}
.overlay .portfolio-subtitle{width:90%;padding:0 5%;font-size:12px;font-weight:normal;color:gray;line-height:16px;text-transform:uppercase}
.overlay-inner{display:table;position:absolute;width:100%;height:100%}
.overlay-content{display:table-cell;vertical-align:middle;text-align:center}
.portfolio-thumb{width:364px;height:205px}
.post h2{font-size:155%}
.isotope .isotope-item{-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-ms-transition-property:-ms-transform,opacity;-o-transition-property:top,left,opacity;transition-property:transform,opacity}
.isotope,.isotope .isotope-item{-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-ms-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s}
</style>
</b:if> </b:if>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post{padding:0 30px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmnimcDuNg26ZG4YEHkPSuatBrkoqT_DX0worH63xxSmECkSp5KJyvmuT-20qfCT9l6QremkX1dIq4rmZrpe_uYGRHtjLOcUcufYCqQWPUWscQkLhgFqluJJGXXZrwXIfYE24Jdjxf2A/s1600/border-h.png) left bottom repeat-x}
.post h1{font-size:26px;line-height:32px}
</style>
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.post{padding:0 30px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmnimcDuNg26ZG4YEHkPSuatBrkoqT_DX0worH63xxSmECkSp5KJyvmuT-20qfCT9l6QremkX1dIq4rmZrpe_uYGRHtjLOcUcufYCqQWPUWscQkLhgFqluJJGXXZrwXIfYE24Jdjxf2A/s1600/border-h.png) left bottom repeat-x}
.post h1{font-size:26px;line-height:32px}
</style>
</b:if>

</head>

<body>

<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>

<b:includable id='post' var='post'>
<article class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<a class='entry-link' expr:href='data:post.url' expr:title='data:post.title'>
<b:if cond='data:post.thumbnailUrl'>
<div class='portfolio-thumb'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='225' width='400'/>
</div>
<b:else/>
<div class='portfolio-thumb'>
<img alt='no image' class='post-thumbnail' height='225' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2FAm3LCkSNk5RgArx2-XUgb7yfl-gxlwTUxCdxpPHOpZ4Zim-C-hkGxyjtBAEEr1B8MhjLO91bwG4d5MWlCxNufKphZX7lM9vIk8-v0_DGpGncJ4__kpRN3dY80p3cvdYxCL3UBI2jnI/s1600/no_image.jpg' width='400'/>
</div>
</b:if>
<div class='overlay'>
<div class='overlay-inner'>
<div class='overlay-content'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'><b:if cond='data:post.link'><data:post.title/>
<b:else/>
<b:if cond='data:post.url'><data:post.title/>
<b:else/><data:post.title/></b:if></b:if></h2>
</b:if>
<div class='portfolio-subtitle'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/><b:if cond='data:label.isLast != "true"'> +</b:if>
</b:loop>
</b:if></div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<p><data:post.snippet/></p>
</div>
</div>
</div>
</div>
</a>
<b:else/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</b:if>
<b:else/>
<div class='isifullx'>
<div class='isinya'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div></div>
<b:if cond='data:blog.pageType == "item"'>
<div class='infonya'>
<ul>
<li><span class='boldnya'>Date:</span> <a class='updated timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></li>
<li><span class='boldnya'>Author:</span> <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li>
<li><span class='boldnya'>Labels:</span> <span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span></li>
</ul>
</div></b:if> </div>
</b:if>
</article>
</b:includable>

<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 1j={L:1N,1b:C,J:1L,U:"1R 1m 1n",R:"1u G",1d:C,B:1k,T:"v://4.1p.P.r/-1x/1E/1G/1H/1I/1J.1K"};u $$$(a){11 o.1l(a)}6 1=1j,3=$$$("m-q-3"),n=$$$("w-G-1w"),y=$$$("w-G-1D"),7="";u W(l){6 k=l.m.Y?l.m.Y:"",a,g,e;7="<N>"+1.U+" &O;"+3.8+"&O;</N>";7+="<Q>";2(k===""){7+="<z>"+1.R+"</z>"}X(6 d=0;d<1.L;d++){2(d==k.K){17}6 b=1A 1B(3.8,"1C"),f=k[d],h=f.1F.$t.x(b,"<E>"+3.8+"</E>");X(6 c=0;c<f.F.K;c++){2(f.F[c].2q=="1M"){a=f.F[c].p;17}}2(1.1b===C){2("V"D f){g=f.V.$t}H{2("I"D f){g=f.I.$t}H{g=""}}}2(1.1d===C){2("Z$10"D f){e=f.Z$10.1o.x(/\\/s[0-9]+\\-c/g,"/s"+1.B+"-c")}H{e=1.T}}g=g.x(/<\\S[^>]*>/g,"");2(g.K>1.J){g=g.1q(0,1.J)+"..."}g=g.x(b,"<E>"+3.8+"</E>");7+=\'<z><1r 5="1t:\'+1.B+"12;1v:"+1.B+\'12;" 13="\'+e+\'" 14="" /><a p="\'+a+\'" 1y="1z">\'+h+"</a>"+g+"</z>"}7+="</Q>";n.15=7;y.5.j="A";n.5.j="18"}u 19(){6 a=o.1a("i");a.1c="M/1e";a.1f="w-m-i";o.1g("1h")[0].1i(a)}19();$("#1O-1P").1Q(\'<16 5="M-1S:1T;1U:1V 0;1W-1X:1Y;">1Z 20 21 : <a p="v://22-23.P.r">24</a> | <a p="v://25.26.r">27.r<a> | 28 29 2a <a p="v://2b.r">2c</a></16>\');u 2d(){n.5.j="A";y.5.j="18";6 a=$$$("w-m-i"),b=o.1a("i");b.1f="w-m-i";b.1c="M/1e";b.13="v://"+2e.2f.2g+"/2h/2i/I?14=2j-D-i&q="+3.8+"&2k-2l="+1.L+"&2m=W";a.2n.2o(a);o.1g("1h")[0].1i(b);11 2p}u 1s(){n.15="";2(3.8===""){n.5.j="A";y.5.j="A"}}
//]]>
</script>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"");d[a].width=b;d[a].height=b}}resizeThumb("main",364);
//]]></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.blog-posts').isotope({
itemSelector : '.post',
});
});
//]]></script>
</b:if> </b:if>

</div>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</body>
</html>