Berbagi itu indah

» » Membuat Hover Effect Menarik dengan CSS3

Membuat Hover Effect Menarik dengan CSS3

Hallo semua Kali ini saya akan membahas tentang CSS3 Animation. Kebanyakan kita melihat Web Design , sudah sangat keren sekali dalam tampilan Webnya maupun dalam hal behavior atau animasi yang ditampilkan di web itu.
Nah, salah satu kelebihan CSS3 adalah kita bisa melakukan animasi tanpa menggunakan Javascript ataupunJQuery pada web kita. Masalah browser yang support atau tidak, bukan lagi menjadi kendala, karenaBrowser sekarang sudah banyak kok,yang support untuk CSS3 seperti Chrome dan Firefox. Kecuali, kalau kamu tidak pernah update browser sama sekali!
Ok, langsung saja. Disini saya akan membuat Hover Effect, yang terdiri dari gambar dan tulisan/caption. Pada tutorial ini saya akan membuat empat effect berbeda, tapi saya akan membahas 1 saja di artikel ini, karena takutnya nanti kepanjangan dan tidak effisien. Pada dasarnya dari keempat effect ini saya menggunakan beberapa property dari CSS3 yaitu :
-webkit-transition:     /*Untuk Chrome, Safari, Opera*/
transition:                    /*Standar CSS3*/
yaitu property yang berfungsi untuk menambahkan efek ketika terjadi transisi atau pergantian dari satu styleke style lain.
Setelah menentukan propertinya, saya menggunakan value sebagai berikut :
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
penjelasan :
opacity 0.35s, -webkit-transform 0.35s ; yaitu pada saat elemen melakukan transisi kita ubah opacitydan –webkit-transform dengan durasi 0.35 detik. Untuk property transition sama saja pengertiannya.
Dan property yang kedua, yaitu :
-webkit-transform:      /*Untuk Chrome, Safari, Opera*/
transform:                    /*Standar CSS3*/
yaitu property yang memungkinkan kita untuk menggerakan, mengubah ukuran sebuah elemen.
Untuk valuenya saya menggunakan fungsi seperti translate3d(x, y, z) , scale()
-webkit-transform: translate3d(-20px,0, 0);
transform: translate3d(-20px,0,0);
artinya pada saat di hover, elemen akan bergeser di sumbu -x (vertical ke kiri) sebesar 20px.
Untuk scale(), yaitu berfungsi untuk mengubah ukuran dari sebuah elemen.
Ok guys, kita langsung saja ke langkah pembuatan nya. chek this out yo.

Langkah 1

Kita buat elemen HTML nya terlebih dahulu. Disini saya menggunakan elemen <figure> dan <figurecaption> karena kita bermain dengan gambar. Selain image, saya juga membuat animasi terhadap tulisan/caption seperti yang terdapat di elemen <h2> dan <p>.
<html>
<head>
<title>Membuat Effect Hover Dengan CSS3</title>
<meta charset="UTF-8">
<link href="hover.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="page_wrap">
<div id="grid">
<figure class="multimedia">
<img src="gambar/head_phone.jpg" alt=""/>
<figcaption>
<h2>Belajar Multimedia ?</h2>
<p>Di PALCOMTECH aja</p>
</figcaption>
</figure>
&nbsp;
<figure class="join-us">
<img src="gambar/notebook.jpg" alt=""/>
<figcaption>
<h2>Let's Join Us</h2>
<p>Menjadi generasi Internet</p>
</figcaption>
</figure>
&nbsp;
<figure class="instruktur">
<img src="gambar/sepeda.jpg" alt=""/>
<figcaption>
<h2>Instruktur</h2>
<p>Professional Dan Keren</p>
</figcaption>
</figure>
&nbsp;
<figure class="kopi">
<img src="gambar/kopi.jpg" alt=""/>
<figcaption>
<h2>Coffe Morning</h2>
<p>Di sini kita <span>LEPASKAN</span> stress</p>
</figcaption>
</figure>
</div>
</div>
</body>
</html>

Langkah 2

Selanjutnya kita buat CSS nya, untuk ini saya hanya menampilkan contoh dari Effect Multimedia saja.
/*Efek Multimedia*/
figure.multimedia img{
width: -webkit-calc(100% + 30px);
width: calc(100% + 30px);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.multimedia:hover img{
opacity: 1;
-webkit-transform: translate3d(-20px,0, 0);
transform: translate3d(-20px,0,0);
}
&nbsp;
figure.multimedia figcaption{
padding: 20px 0 0 10px;
text-align: left;
}
figure.multimedia h2,
figure.multimedia p{
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
&nbsp;
figure.multimedia:hover h2{
-webkit-transform: translate3d(20px,0, 0);
transform: translate3d(20px,0,0);
}
&nbsp;
figure.multimedia p{
padding-top: 10px;
opacity: 0;
}
&nbsp;
figure.multimedia:hover p{
opacity: 1;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transform: translate3d(20px,0, 0);
transform: translate3d(20px,0,0);
}
Intinya, ketika kita membuat animasi hover dengan CSS3 transform dan transition. Kita harus menentukan dahulu ketika sebuah elemen itu dihover, apa yang akan kita lakukan, apakah mengubah ukuran elemen? Menggeser ke kiri atau ke kanan? Mengubah opacity? Terserah sesuai dengan imajinasi PalComSter. Semoga tutorial ini bermanfaat. see yaa..
Labels: Design Web

Thanks for reading Membuat Hover Effect Menarik dengan CSS3. Please share...!

0 Comment for "Membuat Hover Effect Menarik dengan CSS3"

Back To Top