Original image On mousaver

Sebelum membahas lebih lanjut,mungkin yang masih newbie ingin tahu apa sich semua ini koq judulnya agak aneh..!!,yuk silahkan kita ambil contoh sebagai berikut coba Anda arahkan mouse ke gambar yang ada di bawah,

Tulisan Anda di sini !
Tulisan Anda di sini !

Tulisan Anda di sini !
Tulisan Anda di sini !

Nach itu contohnya walaupun salah karena pengertian dari judul di atas adalah ketika mouse di arahkan ke gambar maka gambar tersebut berubah ke ukuran sebenarnya atau berubah membesar tapi ini contohnya jadi beda gambar,maaf keterlaluan yach buat posting nich membuat nambah pusing para Newbie ,mungkin bagi MAster hal itu tak jadi masalah tapi bagi Blogger yang baru membuat pusing, oke kita lanjut cara pembuatannya pertama Anda dalam keadaan Login klik Tata Letak Edit HTML cari kode berikut ]]></b:skin> bila sudah ketemu simpan kode di bawah ini di atas kode tadi ,

<style type="text/css">
.bgsGRenlarge {
float: left;
clear: left;
padding-bottom: 5px;
padding-right: 5px;
}
.bgsGRenlarge a {
display: block;
text-decoration: none;
}
.bgsGRenlarge a:hover{
position:relatif;
}
.bgsGRenlarge span img {
border: 8px ridge #FFFFFF;
margin-bottom: 8px;
}
.bgsGRenlarge a span {
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family:cursive;
font-size: 14px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 18px;
padding-left: 15px;
}
.bgsGRenlarge img { /* leave or IE puts a border around links */
border-width: 0;
}
.bgsGRenlarge a:hover span {
border:4px solid green;
display:block;
position: absolute;
left:20px;
z-index: 100;
}
.resize_thumb {
width: 125px;
height : auto;
}
</style>

Untuk selanjutnya simpan template anda dan lanjut ke Element laman tambah gadget pilih javascript simpan kode di bawah ini ,

<div class="bgsGRenlarge"><a href="http://ozura-mousaver.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK13CSRce7pNY6q8OLUO3sOOUOFqHrWEc7ZGFgBl6-UU0Cx980KbFGwfsvBQ9ZYn9IWLt0A6N2klwddrLEP7Q8wmhjmjZSgbd9yB6oqkgHnVF89YT8ytv513RewEqfax3CL_YmTvorAp9K/s220/psb08.jpg" alt="thumb" class="resize_thumb" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK13CSRce7pNY6q8OLUO3sOOUOFqHrWEc7ZGFgBl6-UU0Cx980KbFGwfsvBQ9ZYn9IWLt0A6N2klwddrLEP7Q8wmhjmjZSgbd9yB6oqkgHnVF89YT8ytv513RewEqfax3CL_YmTvorAp9K/s220/psb08.jpg" alt="large" /><br /><br />Tulisan Anda di sini !<br />Tulisan Anda di sini !<br /><br />Tulisan Anda di sini !<br />Tulisan Anda di sini !</span></a></div>

NB. untuk Link dan Url Image Anda bisa ganti dan untuk Tulisan silahkan Variasikan sesuaikan kebutuhan.