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 

Baca juga