පින්තූර වලට Bump Effect එකක් දෙන්න කැමතිද?

අපේ බ්ලොග් වලට එකතු කරන පින්තූරවලට අපිට ඕන නම් පින්තූරය උඩට mouse pointer එක ගෙනගියාම Bump වෙනවා වගේ Effect එකක් දෙන්න පුළුවන්. මෙන්න මේ පහල මෙම රූපය උඩට mouse pointer ගෙන යන්න පින්තූරය උඩට  mouse pointer  එක ගෙනයන්න එතකොට මේ මොකක්ද කියන්නේ කියල වැටහේවි.

මේක කරගන්න එච්චර අමාරු නැහැ. මුලින්ම කරන්න ඕන මෙන්න මේ code එක Design --> Template Designer ---> Advanced ----> Ad CSS වලට paste කර ගන්න.





.gobump img{

border: 5px solid #ccc;

float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}

.gobump img:hover {
margin-top: 2px;
}

මෙහි border ට යොදාගෙන තිබෙන වර්ණයට අදාල #ccc වෙනුවට ඔබ කැමති වර්ණයක් යොදාගන්නත් පුළුවන්.



දැන් මේක තව වෙනස් කමක් කරන්න නැතුව අපට අවශ්‍ය පින්තූරයට පමණක් bump effect  එක දෙන එක විතරයි කරන්න ඕන. ඒක කරන්නේ මෙහෙමයි.


මුලින්ම අදාල පින්තූරය Compose editor එකට ගන්න. ඉන්පසුව Edit HTML ගියාම උදාහරණයක් විදියට මේවගේ code එකක් ඇවිල්ල තියෙනවානේ.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67NMTDQ7hOKkwUEKVX1knwK0Lo0nsgIuyzNXs58b7rJnoK-VmFKexw8r57KNy5Hj6qiHB1P8fnD-ahfgIb1LqbtgGPcvpkbbMo8k1IMkomVodQOuHapSxdbtcd5LNX6JL-Qzh1O8AuEB3/s1600/5-4-2011+4-07-57+PM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67NMTDQ7hOKkwUEKVX1knwK0Lo0nsgIuyzNXs58b7rJnoK-VmFKexw8r57KNy5Hj6qiHB1P8fnD-ahfgIb1LqbtgGPcvpkbbMo8k1IMkomVodQOuHapSxdbtcd5LNX6JL-Qzh1O8AuEB3/s320/5-4-2011+4-07-57+PM.jpg" width="320" /></a></div>

දැන් එම කේතයේ දෙවන පේලියට මෙහි පෙන්වා ඇති පරිදි class="gobump" කියන කොටස ඇතුළු කරන්න.

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67NMTDQ7hOKkwUEKVX1knwK0Lo0nsgIuyzNXs58b7rJnoK-VmFKexw8r57KNy5Hj6qiHB1P8fnD-ahfgIb1LqbtgGPcvpkbbMo8k1IMkomVodQOuHapSxdbtcd5LNX6JL-Qzh1O8AuEB3/s1600/5-4-2011+4-07-57+PM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67NMTDQ7hOKkwUEKVX1knwK0Lo0nsgIuyzNXs58b7rJnoK-VmFKexw8r57KNy5Hj6qiHB1P8fnD-ahfgIb1LqbtgGPcvpkbbMo8k1IMkomVodQOuHapSxdbtcd5LNX6JL-Qzh1O8AuEB3/s320/5-4-2011+4-07-57+PM.jpg" width="320" /></a></div>

මේක ඔබට අවශ්‍ය ඕනෑම  image එකක html code එකට එකතු කිරීමෙන් Bump effect එක අර ගන්න හැකියි.