Liked

Pin It

CSS Image Effect (Opacity)



Making images of your blog something stylish and different, is no more difficult. There are several ways for it but something longer. Here is simple CSS trick for image opacity. No long codes are required to add in template, put the codes given below where you want to show image. To show image in post area, Go to Edit HTML and paste the codes. If you want to put the image in Sidebar of Blog or in footer section, Go to Blogger Dashboard>>Design>>Add a widget>>HTML/Java Script and paste the codes in content Area. 
-DEMO-


<a href="URL OF LINK" target="_blank">
<img src="URL OF IMAGE" style="opacity:0.5;filter:alpha(opacity=45)"
onmouseover="this.style.opacity=2;this.filters.alpha.opacity=2"
onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=45" border"1"/>
</a>


Note: Replace URL OF LINK with your target link (when click on image). Replace URL OF Image (Use direct Link of image if image is uploaded to some image hosting sites, like Photobucket, imageshak etc. or if you want to host it from blogger, upload image in post area and Look in to Edit HTML area where you find something like this  


<img src="http://3.bp.blogspot.com/-gmQmEJEYRg0/TkzVNCjbVSI/AAAAAAAAAq4 /scvYn6M6IjE/s1600/ kahani +ghar. jpg/></a>

It can be understood by the text given above in Red color, the src of the image that I have Used in this Post and in image tag src stands for "source" or where image is stored. Remember that img tag is empty, means it has no closing tag and contains attributes only. You can learn more some HTML Tag in my older post titled "List Of Html Tag" 


Remove text border="1" if you do not add border to image or replace 1 with num. value for adding the border size.


If you like it, Please share it now !


Arvind 

If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

1 comments:

  1. The OPAX-1000 Opacity Tester system provides on-line opacity testing for container manufacturing. The Opax opacity meter works with a wide variety paint hiding power meter

    ReplyDelete

Your Suggestions are valuable for me.

FeedBurner Updates

 

Thanks for Your Arrival !

Followers

Your Precious Arrival

© 2011-2013. Mast Blog Tips All Rights Reserved Arvind Jangid, Sikar, Rajasthan. Template by Mast Blog Tips | Back To Top |