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

  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.
  • 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.
  • Cara membuat dan menyisipkan CSS dalam halaman web
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.

Kiriman terbaru