Image Tilt Effect CSS Stand Alone

Salah satu cara mendapatkan ide untuk postingan adalah mengacak-ngacak arsip web-blog orang :D In 2015/05/28 master Mary Lou telah memposting tentang Image Tilt Effect. Silahkan sobat baca, lihat demonya kemudian jangan lupa download juga sourcenya. Menurut gue pengertian tilt effect adalah suatu efek ngeblur, berbayang, bergerak-gerak di campur menjadi satu...nah begitu kira-kira ;)) AA Koben cuman mau menjelaskan cara bagaimana pemakaian image tilt-effect karya Mary-Lou ini!

Perhatian: Teknik ini menggunakan beberapa properti CSS yang hanya bekerja di browser modern (yaitu 3D Transforms). Efeknya hanya bekerja pada hover yang berarti efeknya tidak dapat dilihat pada perangkat sentuh pada saat ini.

Setelah mendapatkan hasil download berupa ImageTiltEffect.zip silahkan sobat lakukan un-zip. Kalau di sana file menjadi satu dengan keterangan dan demo dari si-empunya. Inilah tugas saya untuk memisahkan bumbu-bumbu utama dalam membangun efek tilt. Hal pertama yang mesti sobat lakukan adalah memasang tilteffect.css & tiltfx.js ke dalam template blog

Berikut adalah kode CSS hasil pemisahan yg saya buat. Silahkan sobat edit-edit lagi sesuai dengan keperluan. Kalau sobat sudah mempunyai CSS selector gambar pd template, tinggal atur-atur propertinya saja!

.tilt_img {
position: relative;
height: 0;
width: 400px;
height: 300px;
margin: 5px auto;
cursor: move;
}
.tilt_img-4 {
overflow: hidden;
}
.tilt_img img {
max-width: 100%;
display: block;
}
.tilt_img-2::after {
content: '';
position: absolute;
box-shadow: inset 0 0 50px 30px rgba(2,0,37,0.8);
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tilt_img-3 .tilt {
-webkit-filter: grayscale(100%) brightness(105%) contrast(120%);
filter: grayscale(100%) brightness(105%) contrast(120%);
-webkit-transition: filter 0.5s, -webkit-filter 0.5s;
transition: filter 0.5s, -webkit-filter 0.5s;
}
.tilt_img-3 .tilt:hover {
-webkit-filter: none;
filter: none;
}
.tilt_img-4 .tilt {
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}

/* tilteffect.css */
.tilt {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tilt__back,.tilt__front {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tilt__back {
position: relative;
}
.tilt__front {
position: absolute;
top: 0;
left: 0;
}
.tilt_img-border .tilt__back,.tilt_img-border .tilt__front {
border: 1px solid #333;
}
.tilt_img-border .tilt {
overflow: visible;
}

Ada 12 macam efek yg bisa kalian dapatkan, selain penggunaan untuk background! Sobat bisa lihat demonya. Sudah begitu aja ah...wekekekekkk =:)

Similar and other

• Dua Cool CSS3 Effect.
• Cool CSS3 Zooming and Tilting Effect
• Mouse over Parallax or 3D Tilt Effect
• jQuery Plugin To Create Tilt / Parallax Effects For Images
• A tiny parallax tilt effect for jQuery

Bay Bai :-h

Tweet