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
1. Login ke akun blogger.
2. Copy kode dibawah ini, lalu paste kedalam area posting mode HTML.
EFEK 1
<style>EFEK 2
.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>
<style>EFEK 3
.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>
<style>EFEK 4
.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>
<style>EFEK 5
.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>
<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>
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: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.
Extract file hasil download.
Kemudian double klik.
Lalu keraskan volume speaker PC anda.
Enjoy *Salam Assololey
0 Response to "jQuery Fold Image Hover With CSS3"
- 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