8 Arah Efek Hover Suatu Objek Dengan transform: translate

Situseo Blog : Begitu banyaknya jenis efek hover pada css tentu akan memberikan banyak pilihan, dibawah ini ada beberapa contoh efek hover suatu objek dalam berbagai arah, tentunya ini merupakan sebagian kecil dari banyaknya jenis efek hover pada css, semoga dengan variatifnya efek hover yang ada bisa menjadi masukan untuk menghasilkan suatu karya yang lebih unik.

Efek hover dibawah ini menggunakan transform:translate untuk menghasilkan efek hover pada suatu objek ke arah Kiri, Kanan, Atas, Bawah, Kiri Atas, Kiri Bawah, Kanan Atas dan Kanan Bawah atau bisa disebut 8 arah mata angin. Efek hover ini berjalan halus karena dengan tambahan efek transition pada scriptnya, bagaimana hasil dari efek hover tersebut?. Sebaiknya untuk melihat hasil secara maksimal untuk efek ini pergunakan google chrome sebagai browsernya.

Efek Hover Arah Kiri Untuk Objek

Objek

.dalang_kiri: {
background: #808080;
color: #666;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 12px;
border-radius: 3px;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.dalang_kiri:hover {
-webkit-transform: translate(-50px, 0px);
-moz-transform: translate(-50px, 0px);
-o-transform: translate(-50px, 0px);
-transform: translate(-50px, 0px);
}

transition merupakan jangka waktu perpindahan suatu objek yang diukur dengan second, lebih besar angkanya akan menghasilkan efek perpindahan lebih lambat. Untuk script css selanjutnya saya anggap kode transition ada didalamnya.

Efek Hover Arah Kanan Untuk Objek

Objek

.dalang_kanan:hover {
-webkit-transform: translate(50px, 0px);
-moz-transform: translate(50px, 0px);
-o-transform: translate(50px, 0px);
-transform: translate(50px, 0px);
}

Efek Hover Arah Atas Untuk Objek

Objek

.dalang_atas:hover {
-webkit-transform: translate(0px, -50px);
-moz-transform: translate(0px, -50px);
-o-transform: translate(0px, -50px);
-transform: translate(0px, -50px);
}

Efek Hover Arah Bawah Untuk Objek

Objek

.dalang_bawah:hover {
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-transform: translate(0px, 50px);
}

Efek Hover Arah Kiri Atas Untuk Objek

Objek

.dalang_kiriatas:hover {
-webkit-transform: translate(-50px, -50px);
-moz-transform: translate(-50px, -50px);
-o-transform: translate(-50px, -50px);
-transform: translate(-50px, -50px);
}

Efek Hover Arah Kiri Bawah Untuk Objek

Objek

.dalang_kiribawah:hover {
-webkit-transform: translate(-50px, 50px);
-moz-transform: translate(-50px, 50px);
-o-transform: translate(-50px, 50px);
-transform: translate(-50px, 50px);
}

Efek Hover Arah Kanan Atas Untuk Objek

Objek

.dalang_kananatas:hover {
-webkit-transform: translate(50px, -50px);
-moz-transform: translate(50px, -50px);
-o-transform: translate(50px, -50px);
-transform: translate(50px, -50px);
}

Efek Hover Arah Kanan Bawah Untuk Objek

Objek

.dalang_kananbawah:hover {
-webkit-transform: translate(50px, 50px);
-moz-transform: translate(50px, 50px);
-o-transform: translate(50px, 50px);
-transform: translate(50px, 50px);
}

Itulah sedikit contoh efek hover transform: translate dari 8 arah pergeseran yang bisa dipergunakan untuk mempercantik tampilan efek blog.

Semoga bermnafaat,