CSS - Efek Multi Hover Pada Imej

hover right hover top hover left hover bottom

Untuk Papar Efek Sila Letakkan Cursor Pada Bahagian Atas , Bawah , Kiri Atau Kanan Pada Imej

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL + F) kod dibawah:

</head>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod </head>

<style type="text/css">
  /* The container and the image */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}
/* The texts that, by default, are hidden */
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    height: 100%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: 100%;
  }
/* And this is what will generate the effect */
  div.multi-hover span:nth-child(1) { /* right */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* top */
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* left */
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* bottom */
    background: none repeat scroll 0 0  rgba(97, 181, 115, 0.6);
    left: 0;
    top: 80%;
  }
  div.multi-hover span:hover {opacity: 1;}
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  div.multi-hover span:nth-child(2n):hover {top: 0;}
</style>

7. Klik Save Template

8. Untuk paparkan Efek pada entri, Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah pada ruang HTML entri anda ( Posts >> New Post >> HTML )

<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5lnmQXAIKbP7e-qaVIPcRhp9A7_IotShppOevZ73uR-NuYgr3dMFebrwjpnMZ8H_qM5P1gxSOtGwNienmBRnhwBMxQ0CSW-CXSl5d6pmT4Oc2Kze9ldO2d0VpOzwxC5i01CEW7La_ZaI/s640/autumn-leaves-fall-leaf-4123-hd-desktop-wallpaper.jpg" width="640" height="425" />
</div>

Keterangan:

• Gantikan URL/LINK IMEJ (link yang berwarna biru) dengan URL/LINK IMEJ anda.
• Gantikan nilai 640 dengan saiz lebar imej anda.
• Gantikan nilai 425 dengan saiz ketinggian imej anda.

Baca Selengkapnya »

Jom Belajar CSS - Part 1

• Apa itu CSS?

Cascading Style Sheets (CSS) merupakan satu himpunan kod format sesuatu laman web. Ia boleh digunakan secara dalaman (bersama-sama dengan kod HTML dalam satu fail) atau secara luaran (fail CSS dan HTML berasingan).

Antara kelebihannya adalah sesuatu format boleh dilakukan secara berulang kali dan proses penyuntingan dapat dilakukan dengan cepat. Contohnya, katakan lah kita inginkan sesuatu jadual mempunyai petak tajuk berwarna biru dan petak biasa berwarna putih manakala tulisan menggunakan arial dan bewarna kuning. Secara manual, pasti memakan masa terutama apabila bilangan jadual yang banyak. Bayangkan kalau kita nak menukar warna teks, kita perlu ke setiap teks untuk menukarnya.

Dengan CSS, kita hanya perlu tukar kod dalam CSS sahaja dan secara automatik, semua kod HTML yang menggunakan CSS turut dikemaskinikan

(Sumber: wikipedia)

• CSS Syntax

CSS Syntax terdiri daripada 2 bahagian iaitu Selector dan Declaration. Declaration pula terbahagi kepada 2 iaitu Property dan Value.

#  Format penulisan CSS:

CONTOH: 

# Format Penulisan  CSS jika Selector lebih dari satu:

# Format Penulisan CSS jika Selector dan Declaration(Property & Value) lebih dari satu:

# Format Penulisan CSS Selector dan Declaration(Property & Value) yang lebih mudah untuk difahami:

h1 {

  color: blue;

  font-family: arial,helvetica,"sans serif";

  text-align: center;

   }

• CSS Comments

Komen digunakan untuk menerangkan setiap kod yang anda buat . Dengan komen ini ,akan dapat membantu dan memudahkan anda untuk proses pengeditan kod css anda kemudian hari. Untuk menulis komen anda perlu menggunakan tag pembuka " /* " dan penutup " */ " . Semua teks yang ditulis diantara  tag " /* " dan " */ " tidak  akan terpapar pada layar pelayar(browser) dan hanya di anggap sebagai catatan.

CONTOH:

/*LETAKKAN KOMEN ANDA DISINI*/

h1, h2, h3 {

  color: blue;

  font-family: arial,helvetica,"sans serif";

  text-align: center;

   }

Baca Selengkapnya »