Membuat efek gambar dengan css

CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list, kita juga bisa gunakan untuk mengatur tampilan gambar. Berikut ini beberapa penerapan efek css pada gambar.

Kali ini saya berbagi tentang bagaimana memberikan efek pada gambar dengan css. Saya sudah siapkan contoh yaitu :

Efek Glow

Efek css pada gambarefek csscss effect

Untuk memberikan efek glow/bercahaya pada area luar gambar kita bisa gunakan kode css berikut :

#contoh1 {
    width: 600px;
    margin: 0 auto;
}
#contoh1 img {
    margin: 25px;
    border: 10px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#contoh1 img:hover { 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Efek Goyang

glow cssshadow cssborder image

Untuk memberikan efek bergoyang pada gambar kita bisa gunakan kode css berikut :

#contoh2 {
    width: 600px;
    margin: 0 auto;
}
 
#contoh2 img {
    margin: 30px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#contoh2 img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Efek transparan

css transparancss tembus pandangcss menarik

Untuk memberikan efek transparan pada gambar kita bisa gunakan kode css berikut :

#contoh3 {
    width: 600px;
    margin: 0 auto;
}
#contoh3 img {
    margin: 25px;
    border: 10px solid #eee;
    opacity:0.5;
}
#contoh3 img:hover { 
    opacity:1;
}

Lihat demo efek gambar

Jika anda ingin menerapkannya di blogger, anda bisa baca artikel Membuat efek gambar di blog dengan css

Semoga bermanfaat, jangan sungkan untuk memberi masukan atau pertanyaan.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Membuat halaman web dengan latar background bintang dengan css
    Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Apa css sprite dan bagaimana membuatnya
    CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y

Kiriman terbaru