Cara Membuat CSS Hover BOX

Baca Juga

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;
}

.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