Cara Membuat Efek Terang Dan Gelap Untuk Gambar Diblog

Cara Membuat Efek Terang Dan Gelap Untuk Gambar Diblog

CSS3 merupakan salah satu kode bahasa yang penting dalam pembuatan design sebuah blog/website. Dengan menggunakan CSS kamu dapat membuat efek pada gambar, gadget, box, area, menu dropdown, dll. Dan untuk kali ini kamu akan membuat efek  gambar pada artikel apabila tersentuh oleh mouse maka akan menjadi gelap atau pun terang.

Membuat Efek Image Hover Gelap ke Terang :

1. Masuk ke bagian Tata Letak  > Design Rancangan > Layout,

2. Add a Gadget / Widget,

3. Pilih HTML/Javascrip,

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 kamu,

6. Selesai.

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 kamu yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML kamu 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/AVvXsEiSEWC8e1izPI2z9j-caAuhioORaUSz2b3mqh1C59znBUJ4Sw5hqBHPzKYl927n_mpC7ob4hrufUs71oKhCbkmGTv4-e9gUk8tjQF4XoJuBuhkHc3WVXmx-_3Qsr3SwF7vEfmXEdRxRXuA/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</div>