Cara Membuat CSS Hover BOX

CSS Hover Box

Bismillah.... setelah saya buat artikel tentang Cara Optimalisasi Gambar Di Search Engine sekarang saya akan sedikit share tentang CSS, oke pada kesempatan ini saya akan bahas CSS tentang Hover box gambar, langsung ke tutorial CSS nya yukk.

• Langkah pertama sobat Login ke blogger
• Terus masuk ke Edit HTML dan centang Expand Widget
• Terus sobat cari tag/kode </head> terus letakan kode CSS di bawah ini tepat di atas tag </head>

KODE CSS HOVER BOX

<style type="text/css" media="screen">
.hoverbox
{
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}

.hoverbox a .preview
{
    display: none;
}

Baca Juga

• Cara Membuat Handscroll Image Di Blog
• Beberapa Situs Penyedia CSS3 Generator
• Membuat Diamond Dengan CSS3
• Tri Angle Label Cloud Blogspot
• CSS3 Gradient Generator Online
• Template Login Page Hotspot PSB
• Kumpulan DP Malam Minggu Bergerak
• Teknologi Tanam Mina Padi Pada Tanah Persawahan
• Pemandangan Indah Gua Melissani Yunani
• Sinkronisasi Waktu Otomatis di Routerboard

.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}

.hoverbox img
{
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.hoverbox .preview
{
    border-color: #000;
    width: 200px;
    height: 150px;
}
</style>

Lalu Save Template sobat

Langkah selanjutnya sobat masukan kode di bawah letaknya terserah mau di postingan, di gadget, atau di  mana terserah sobat

<ul class="hoverbox">
<li>
<a href="#"><img src="Alamat gambar1" alt="description" /><img src="Alamat gambar1" alt="description" class="preview" /></a>
</li>
</ul>

Terus lihat hasilnya untuk sample silahkan sobat lihat di sini , mungkin itu sedikit tutorial tentang CSS Hover Image Box semoga bermanfaat, Happy Blogging