Cara Membuat Efek Terang Gambar Di Blog Dengan CSS

Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalahCSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.

Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.

Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.

<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

5. Simpan Widget Anda.

Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :

<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.

xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>

xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>

Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :

<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPpkShfHTnMpBMfi1yWjTT4lQi3Kh0uqdh-gY034W8VwjHUGKatozOLP568axFr91SUFL5MYLFyoaEleyA4OIb5x9SDBFwNcIm72aDAbjQgxUundFKpFwghoLjrSYba_oOTthxh-dmrcs/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>

src : http://impoint.blogspot.com/2013/03/cara-membuat-efek-gelap-terang-css.html

Artikel Terkait:

Panduan Blog

• Cara Menghilangkan Tulisan Template Awesome Inc. Diberdayakan Oleh Google
• Istilah Istilah Dalam Blog
• Memperkeren Komentar Blog
• Cara Buat Widget Entri Populer Elegant
• Cara Membuat Tab Menu Laman Di Atas Header Blog
• Privacy Policy
• Sitemap ( Peta Situs )
• Cara Membuat Judul Widget Berada Di Tengah Sidebar
• Membuat Navigasi Halaman Berupa Angka
• Membatasi Jumlah Posting per-Label
• Cara Mendaftarkan Blog Di Ribuan Mesin Pencari
• Cara Membuat Scroll Di Widget Arsip Blog
• Cara Membuat Recent Post Dengan Thumbnail Keren
• Cara membuat recent post dengan thumbnail bergerak di blog