Assalamualaikum dan hai semua...harinie nak buat tutorial yang agak awesome pulak...awesome ker?
This is a tutorial about something hidden behind an image...wow...its sound really mysterious... :D
Harsh Warning : No re-post / re-tutor !!
Hover Below Picture for a live preview
For template designer :
www.blogger.com/home --> Layout --> add gadget --> HTML/Javascript
For blogskin :
www.blogger.com/home --> Template --> Paste it anywhere you want it to appear
The Code
<style type="text/css">
.outer {
height:210px;
width:210px;
border:5px solid #FFE6E9;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#output {
background-image: url(http://31.media.tumblr.com/tumblr_ldoxjm32p81qba4k7o1_400.png);
background-position: 50% 50%;
background-size: 340px;
background-color: #FFFFFF;
}
.input {
width:100%;
height:95%;
font:13px candara;
color: #000000;
text-align:center;
padding-top:10px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
background-image: url(http://25.media.tumblr.com/tumblr_lq95jyYtdA1qbste0o1_400.jpg);
background-size:320px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.outer:hover .input {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
</style>
<center><div class="outer" id="output"><div class="input">
<div style="background:#EEEEEE;">
Put anything here like text,cbox code,ask.fm code or etc
</div></div></div></center>
The Note
Blue text : Width , height of the image and background
Green text : Background image URL
Red text : Put anything you want
Preview and save when done...comments and credit are really appreciated...
use
ReplyDeleteOkay...thanks for using...^^
Deletesaya guna taw
ReplyDeleteOkay Aliyah... ;)
DeleteTak bole re-tutor kah? with credit and link? :(
ReplyDeleteRe-tutor aja kalau mahu... ;D
DeleteThanks for tutorial^^
ReplyDelete