Cara Membuat Efek Gelap Terang Gambar dengan CSS

Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. 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/AVvXsEhzCXsfyVaxrXc-MLr5x5echtzvr7ngoRT8LYQkaGNzN9k-cAZGgCtAxDUBadHuWw6UqEE8wP6s6-abn3lpx6XCpCbkFaJuk334qignZ4713yipX3rg0HBesSmFgoyRZSnTkrY32dqWUu8/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>

Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image. Semoga cara membuat dan memasang efek gelap terang tersebut dapat dilakukan dengan mudah.