jQuery Fold Image Hover With CSS3

Info informasi jQuery Fold Image Hover With CSS3 atau artikel tentang jQuery Fold Image Hover With CSS3 ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

jQuery Flod Image Hover With CSS3 - fold image hover merupakan sebuah efek pada gambar yang nantinya jika gambar tersebut tersentuh oleh mouse atau hover maka akan memiliki efek fold atau melipat sehingga membentuk 3D. Pada tutorial ini terdapat 5 style hover yang nantinya dapat kita masukan untuk membentuk efek pada gambar yang terdapat didalam posting blog dan bisa kita tampilkan langsung tanpa perlu edit HTML maupun menambahkan kode pada template blog. Sebenarnya langkah ini jauh lebih mudah daripada terlebih dahulu kita memasukan kode kedalam template blog, namun kelemahannya jika kita cek di validatorW3 ternyata langkah tersebut bisa digunakan namun tidak valid HTML5 yang pada akhirnya menambah jumlah eror yang terdapat didalam URL blog yang kita kelola dan setiap akan menerapkan efek ini maka harus memasukan seluruh kode lengkap antara jQuery, CSS dan HTML kedalam postingan. Sedangkan jika kode CSSnya terlebih dahulu kita masukan kedalam template blog nantinya kode HTML yang akan kita masukan kedalam template blog agar bisa valid HTML5 dapat kita ubah atau sesuaikan namun langkah ini mungkin kurang disenangi karena sedikit akan memperlambat loading blog jika banyak kode yang nantinya kita masukan kedalam template blog. Begitulah penjelasan singkatnya mengenai flod image hover, jadi untuk mempersingkat langkah penerapannya kita gunakan yang mudah saja. Maka berikut adalah tutorial jQuery Fold Image Hover With CSS3 dan cara penerapannya kedalam blog.

1. Login ke akun blogger.
2. Copy kode dibawah ini, lalu paste kedalam area posting mode HTML.

EFEK 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://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-21_zps7451f736.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-23_zps441a2254.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-27_zps50ae6694.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-28_zpsab0e98d4.jpg" />
</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>

DEMO

EFEK 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://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-31_zps1c9d6589.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-34_zps00974356.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-36_zps56a53b44.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-38_zpse46e3443.jpg" />
</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>

DEMO

EFEK 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: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.view:hover .s1{
-webkit-transform: rotate3d(0,1,0,-55deg);
-moz-transform: rotate3d(0,1,0,-55deg);
-o-transform: rotate3d(0,1,0,-55deg);
-ms-transform: rotate3d(0,1,0,-55deg);
transform: rotate3d(0,1,0,-55deg);
}
.view:hover .s2,
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
}
.view:hover .s3{
-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 .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
}
.view .s1 > .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 .s5 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
}
</style>

<div id="grid" class="efek3">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-42_zpsdafa0f2c.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-59_zpseca64494.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-61_zpsdb575ed9.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-72_zps38b1ec95.jpg" />
</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>

DEMO

EFEK 4

<style>
.efek4{
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://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-97_zps3b3a4e9a.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-105_zps8ce46fb2.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-127_zps7e47399f.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-131_zps131e9aa8.jpg" />
</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>

DEMO

EFEK 5

<style>
.efek5 {
width: 390px;
height: 558px;
overflow: visible;
}
.view {
width: 390px;
height: 558px;
margin: 0px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.view .slice{
width: 196px;
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;
z-index: 0;
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%);
}
.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 .s3 {
-webkit-transform: translate3d(196px,0,0);
-moz-transform: translate3d(196px,0,0);
-o-transform: translate3d(196px,0,0);
-ms-transform: translate3d(196px,0,0);
transform: translate3d(196px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 {    background-position: -196px 0px; }
.view .overlay {
width: 196px;
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(195px,0,0) rotate3d(0,1,0,-45deg);
-moz-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
-o-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
-ms-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
}
.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%);
}
</style>

<div id="grid" class="efek5">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">→</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/kellylin_zps6a730880.jpg" />
</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>

DEMO

Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halman yang di inginkan.
Ganti setiap URL gambar yang terdapat di markup HTML dengan gambar lain yang di inginkan.

3. Jika semua sudah sesuai, maka selanjutnya bisa klik Publikasikan.

Tambahan:
Agar bekerja secara maksimal dalam menerapkan langkah-langkah diatas saya rekomendasikan untuk download file dibawah ini terlebih dahulu.

Download

Intruksi:
Extract file hasil download.
Kemudian double klik.
Lalu keraskan volume speaker PC anda.
Enjoy *Salam Assololey

Demikian artikel tentang jQuery Fold Image Hover With CSS3 ini dapat kami sampaikan, semoga artikel atau info tentang jQuery Fold Image Hover With CSS3 ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik

01. Backlink Indonesia	26. Iklan Maluku Utara
02. Backlink Termurah	27. Iklan Nusa Tenggara Barat
03. Cara Membeli Backlink	28. Iklan Nusa Tenggara Timur
04. Iklan Aceh	29. Iklan Online Indonesia
05. Iklan Bali	30. Iklan Papua
06. Iklan Bangka Belitung	31. Iklan Papua Barat
07. Iklan Banten	32. Iklan Riau
08. Iklan Bengkulu	33. Iklan Semesta
09. Iklan Dunia	34. Iklan Sulawesi Barat
10. Iklan Gorontalo	35. Iklan Sulawesi Selatan
11. Iklan Internet	36. Iklan Sulawesi Tengah
12. Iklan Jakarta	37. Iklan Sulawesi Tenggara
13. Iklan Jambi	38. Iklan Sulawesi Utara
14. Iklan Jawa Barat	39. Iklan Sumatra Barat
15. Iklan Jawa Tengah	40. Iklan Sumatra Selatan
16. Iklan Jawa Timur	41. Iklan Sumatra Utara
17. Iklan Kalimantan Barat	42. Iklan Terbaru
18. Iklan Kalimantan Selatan	43. Iklan Yogyakarta
19. Iklan Kalimantan Tengah	44. Jaringan Backlink
20. Iklan Kalimantan Timur	45. Jasa Backlink
21. Iklan Kalimantan Utara	46. Jasa Backlink Murah
22. Iklan Kepulauan Riau	47. Jasa Backlink Terbaik
23. Iklan Lampung	48. Jasa Backlink Termurah
24. Iklan Link	49. Media Backlink
25. Iklan Maluku	50. Raja Backlink