☆彡Hover The Image, Got Something :)



Hello Guys!

 Hari ni Nurin nak buat satu tuto yg direquest oleh seseorg di C-Box Nurin, sorry sbb lambat buat :) Hover image ada banyak jenis, tapi yg ini.. my version.. hahhaha.. Nurin reka code dia sendiri.. so, kalau guna tuto ni sila credit :) Hanya utk pengguna Blogskin sahaja !


LIVE PREVIEW HERE!

.bar {
background: #ffffff;
color: #555;
font:normal 8px pixeljosh6;
padding: 8px;
width: 240px;
text-align: justify;
border:1px solid #dddddd;
}
#slide{
position:fixed !important;
padding-bottom:13px;
padding-top:15px;
height:190px;
width:260px;
overflow:hidden;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
z-index:999;
font-size: 11px;}

#slide:hover{
width:260px;
height:585px;
}
.border1{height:170px;width:250px;padding:3px;border:1px solid #D7CDBD;-moz-box-shadow:2px 2px 2px #e9e9e9; -webkit-box-shadow: 5x 5px 7px #e9e9e9; -khtml-box-shadow: 5px 5px 7px #e9e9e9; overflow: hidden;}
  

  • Done? lepas tu copy code bawah ni pulak and paste selepas <BODY> or </style>
<td valign="top" width="200px">
<div style='display:scroll; position:fixed;'>
<div id="slide">
<center><div style="background:#fff;border-right-radius: 9px;border-left-radius: 9px; width:90px;padding:3px;border:1px solid #dedede;
font:normal 8px pixeljosh6;">Hover The Image</div>
<img class="border1" src="Your Image Here!" /><br><br>
<div class="bar">
Your Description Begin Here :)</div>

Orange : Letak gmbr korang 
Italic : Tulis apa2 description kat situ :)

Preview dulu, kalau dah puas hati.. barula Save Template, okey.. that's all for today.. Tutorial ni hanya utk pengguna Blogskin sahaja :) 

Labels: