Membuat Efek Gambar Dengan CSS
4
Membuat Efek Gambar dengan CSS Home » Trik CSS » Membuat Efek Gambar dengan CSS Pada postingan kali ini saya akan membagikan sedikit trik CSS untuk membuat efek pada gambar atau image di blog. Efek yang dimaksud di sini adalah penambahan efek hover dengan CSS yang akan bekerja ketika kursor mouse melewati atau berada di atas gambar. Banyak sekali jenis efek hover ini akan mempercantik tampilan gambar yang kita gunakan di blog. Beberapa diantaranya seperti efek zoom, transparan, bergulung, berputar dan masih banyak lainnya. Berikut ini contoh dari gambar yang diberikan efek hover goyang, Cantik gak? hhe.. Oke langsung saja kita bereksperimen membuat efek gambar dengan CSS. Kode HTML Kode HTML yang kita gunakan adalah: <img src="url_gambar" /> Kode CSS Efek glow img { margin: 5px; border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease;
-
Upload
misbakhudin-dlight-lamps -
Category
Documents
-
view
42 -
download
8
Transcript of Membuat Efek Gambar Dengan CSS
Membuat Efek Gambar dengan CSSHome » Trik CSS » Membuat Efek Gambar dengan CSS
Pada postingan kali ini saya akan membagikan sedikit trik CSS untuk membuat efek pada gambar atau
image di blog. Efek yang dimaksud di sini adalah penambahan efek hover dengan CSS yang akan
bekerja ketika kursor mouse melewati atau berada di atas gambar. Banyak sekali jenis efek hover ini
akan mempercantik tampilan gambar yang kita gunakan di blog. Beberapa diantaranya seperti efek
zoom, transparan, bergulung, berputar dan masih banyak lainnya.
Berikut ini contoh dari gambar yang diberikan efek hover goyang,
Cantik gak? hhe.. Oke langsung saja kita bereksperimen membuat efek gambar dengan CSS.
Kode HTML
Kode HTML yang kita gunakan adalah:
<img src="url_gambar" />
Kode CSS
Efek glow
img {
margin: 5px;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
-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);
}
demo
Efek Goyang
img {
margin: 5px;
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;
}
img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
demo
Efek zoom
img {
margin: 5px;
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;
}
img: hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }
demo
Efek transparan
img {
margin: 5px;
border: 10px solid #eee;
opacity:0.5;
}
img:hover {
opacity:1;
}
demo
Efek daun
img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #fff;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
demo
Efek bergulung
img {
-webkit-transition-duration:.4s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .9.9;border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
demo
Untuk demo menyusul karena saya mau tidur dulu ya. Selamat berkreasi membuat efek gambar
dengan CSS.
@ Monday, July 23, 2012
Email ThisBlogThis!Share to TwitterShare to Facebook
Label: Trik CSS
