Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Fold Image Hover With CSS3

Flod Image Hover
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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>
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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>
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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>
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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>
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">&rarr;</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>
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.
Intruksi:
Extract file hasil download.
Kemudian double klik.
Lalu keraskan volume speaker PC anda.
Enjoy *Salam Assololey

Berlangganan artikel via email

7 Response to "jQuery Fold Image Hover With CSS3"

avatar
Anonymous

bagus banget nih efek flod, sehingga bisa jadi mainan pengunjung. asyik memainkan mouse untuk bisa melihat efek hover tersebut. makasih Om sudah berbagi image hover keren ini.

Balas

Itu FLOD atau FOLD yah mas? Hehehe..asyik memang kalau udah berkutat di efek folding begini, gak ada bosen-bosen nya terlebih kalau pinter berkreasi. Well..kalau boleh share (karena saya paling suka efek folding ini dari efek-efek lainnya), dulu saya cinta banget dengan efek Paper-Like Unfolding Effect dari om tympanus ini : http://tympanus.net/Development/PFold/index.html. Garang banget tuh efek nya! Yaa walaupun memang hover nya diganti dengan click/touch event, tapi buat saya tetep menyayat hati. :)

Balas

hahaha iya mas daniel fold maksudnya, salah tulis. terimakasih atas koreksinya sudah mengingatkan. judulnya udah bener sekarang tapi sebagian biarinlah ada yang belum di benerin :)

Balas
avatar
Anonymous

Berarti ada kelebihan dan kekurangannya yah mas andes, tapi keren juga sih, perlu dicoba, makasih mas mantap nih tutorialnya :)

Balas

Terlalu semangat apa karena udah ngantuk mas? Hehe... minum kopi dulu deh....

Balas

ini yang kemaren efeknya dipake sama blog miztia ya,ternyata sumbernya dari sini, comot ah

Balas

bungkus aja bungkus.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Fold Image Hover With CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode