fitri1986

Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

10 Oktober 2013

Efek Gambar Lipatan 3D

Gerakkan mouse ke gambar budak ni





Code Style 1
<style>
.efek1{
position: relative;
overflow: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px #52e052;
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}

.view-back span:first-child { padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 { background-position: 0px 0px; }
.view .s2 { background-position: -60px 0px; }
.view .s3 { background-position: -120px 0px; }
.view .s4 { background-position: -180px 0px; }
.view .s5 { background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay { opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view:hover .s2{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}
.view .s1 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
</style>

<div id="grid" class="efek1">
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

Snapshot only for effect 2


Code Style 2
<style>
.efek2{
position: relative;
overflow: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child { padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 { background-position: 0px 0px; }
.view .s2 { background-position: -60px 0px; }
.view .s3 { background-position: -120px 0px; }
.view .s4 { background-position: -180px 0px; }
.view .s5 { background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay { opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.view:hover .s1{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-o-transition-delay: 200ms;
-ms-transition-delay: 200ms;
transition-delay: 200ms;

-webkit-transform: rotate3d(0,1,0,-3deg);
-moz-transform: rotate3d(0,1,0,-3deg);
-o-transform: rotate3d(0,1,0,-3deg);
-ms-transform: rotate3d(0,1,0,-3deg);
transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-o-transition-delay: 150ms;
-ms-transition-delay: 150ms;
transition-delay: 150ms;
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
-ms-transition-delay: 100ms;
transition-delay: 100ms;
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4{
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-o-transition-delay: 50ms;
-ms-transition-delay: 50ms;
transition-delay: 50ms;
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5{
-webkit-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-moz-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-o-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-ms-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view div.view-back{
background: #0a0a0a;
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
</style>

<div id="grid" class="efek2">
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

Snapshot only for effect 3

Demo available here

Code Stle 3
<style>
.efek3{
position: relative;
overflow: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child { padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 { background-position: 0px 0px; }
.view .s2 { background-position: -60px 0px; }
.view .s3 { background-position: -120px 0px; }
.view .s4 { background-position: -180px 0px; }
.view .s5 { background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay { opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view {
-webkit-perspective: 1050px;
-moz-perspective: 1050px;
-o-perspective: 1050px;
-ms-perspective: 1050px;
perspective: 1050px;
}
.view div {
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view:hover .s3{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
}
.view:hover .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
}
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view div.view-back{
background: #0a0a0a;
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
</style>

<div id="grid" class="efek4">
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;;</a>
</div>
<img src="url gambar korang" />
</div>
<div class="view">
<div class="view-back">
<a href="http://fitri1986.blogspot.com">&rarr;</a>
</div>
<img src="url gambar korang" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

-
Label:
RELATED POSTS

Post a Comment:

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

Langgan: Catat Ulasan (Atom)

At the post page,this banner can be spin around ;)

Blog: Aideal Fitri | 1986