welcome image

<div id='mask'>
<img id='welcomeimg' src='URLGAMBAR'/>
</div>
<style>
body{
overflow-x: hidden;
overflow-y: hidden;
}
#mask{
position:fixed;
z-index:1000;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:url(URLBACKGROUND);
}
#welcomeimg{
position:absolute;
margin-left:-350px;
left:50%;
margin-top:-129px;
top:50%;
opacity:0.5;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
}
#welcomeimg:hover{
opacity:1;
}
</style>
<script>
$(document).ready(function(){
$('#welcomeimg').click(function(){
$('#mask').fadeOut();
$('body').css({"overflow-x":"auto","overflow-y":"auto"});
})
})
</script>

URLGAMBAR adalah URL gambar yang aka di klik

URLBACKGROUND adalah URL background blog

margin-left:-350px; 350 tu tukar kepada 1/2 panjang gambar yang dia nak guna. mesti letak kalau tak gambar tak boleh ke tengah

margin-top:-129px; 129 tu tukar kepada 1/2 tinggi gambar yang dia nak guna. mesti letak kalau tak gambar tak boleh ke tengah

letak kod ni directly selepas </head>

kalau tak ada jQuery punya library kena tambah

><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

you can click on this button to check the height and width of your image.