frhxv
Tutorial : Image hover ( about section )

Assalamualaikum~ Hari ni han nak bagi tuto. Ada saeng ni request,sorry sbb han lambat buat tuto ni. At first fully credit to FarahDini for this. So leggo ~

1. Dash > Template
2. Ctrl + F serentak dan cari code </style>
3. Copy code di bawah

.kaisoo{ width:90px;height:90px;
-webkit-border-radius:100px 100px 90px 0px;
-moz-border-radius:90px 100px 90px 0px;
border-radius:100px 90px 0px 100px;
border: 0px solid #e6e6e6;-webkit-transition:1s;}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}

.kaisoo:hover{ border-radius:100px 90px 100px 0px;
-webkit-transition: opacity 0.8s linear;
opacity: 0.80;-webkit-filter:grayscale(75%);
-webkit-transition:1s;}


.kaisoo2{ width:90px;height:90px;
-webkit-border-radius:100px 90px 100px 0px;
-moz-border-radius:100px 90px 100px 0px;
border-radius:100px 90px 100px 0px;
border: 0px solid #e6e6e6; -webkit-transition:1s; }

.kaisoo2:hover{border-radius:100px 90px 0px 100px;-webkit-transition: opacity 0.8s linear;opacity: 0.80;-webkit-filter:grayscale(75%);-webkit-transition:1s;}

.chenchen2{
text-transform:uppercase;
margin-bottom: 8px;
font:8px tt;
line-height: 14px;
padding: 3px;}
4. Paste code tu di atas code </style>
5. Then,copy code bawah ni pulak

<img class="kaisoo2" src="IMG URL" style="border: 1px solid #eee; float: left; margin-bottom: 7px; margin-right: 10px; padding: 2px;" />
<br />

<div class="chenchen2">
<span style="font-family:cambria; letter-spacing:1px; color: #e06666; font-style:italic; font-size:17px">B</span>ismillahirrahmanirrahim. Your own text here<br /><span style="color: #ffd966;"><br /></span>

<img class="kaisoo" src="IMG URL" style="border: 1px solid #eee; float: right; margin-bottom: 7px; margin-left: 10px; padding: 2px;" />
<br />

<span style="font-family:cambria; color: #6fa8dc; letter-spacing:1px; font-style:italic; font-size:16px">T</span>he things that i like is,Your own text here<br />
<span style="color: #ffd966;"><br /></span>

<img class="kaisoo2" src="IMG URL" style="border: 1px solid #eee; float: left; margin-bottom: 7px; margin-right: 10px; padding: 2px;" />
<br />

<span style="font-family:cambria; color: #e69138; letter-spacing:1px; font-style:italic; font-size:16px">T</span>he things that i don't like is, Your own text here<br />
<span style="color: #ffd966;"><br /></span>

<br>
6. Paste code tu di bahagian about section korang.
7. Preview & save

Blue : URL image
Pink : ayat korang

p/s : Pastikan ayat korang panjang. Better dalam 6 lines.
[ 0 comments ]