Tuesday, 19 November 2013

Hover image got something



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


Put anything here like text,cbox code,ask.fm code or etc

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
Fuchsia text : Color code FIND HERE
Green text : Background image URL
Red text : Put anything you want

Preview and save when done...comments and credit are really appreciated...

7 comments: