Border Image

Sering kali kita membuat CSS untuk border image, biasanya border image dipakai/dipasang ketika mouse yang kita gerakkan berada di atas gambar yang sudah kita siapkan atau istilahnya Rollover Image. Penggunaan border yang tidak tepat bisa menyebabkan layout dari Tampilan website akan berubah.

Bagaimana caranya agar layout yang sudah kita punya tidak berubah ketika sedang rollover image :

Kasus Biasanya


<style type="text/css">
#problem-css a img, #problem-css a   { border: none; float: left; }
#problem-css a:hover                     { border: 3px solid black; }
</style>

Solusi pakai inner border


<style type="text/css">
#inner-css a img, #inner-css a           { border: none; overflow: hidden; float: left; }
#inner-css a:hover                         { border: 3px solid black; }
#inner-css a:hover img                     { margin: -3px; }
</style>

Solusi pakai outer border


<style type="text/css">
#outer-css a img, #outer-css a           { border: none; float: left; }
#outer-css a                               { margin: 3px; }
#outer-css a:hover                         { outline: 3px solid black; }
</style>