NOTICE

Adfly Links not working Find Direct Links HERE

How to Change Image Opacity On Hover - Image Effect In Blogger

Notice the effect in images below you will see that their opacity Increases on hovering and when we remove cursor from image they become translucent. You can also add this effect in any image on your blog .This is a one time hack and after that you can give this effect any image of your choice.

How to Change Image Opacity On Hover?




How to apply this ?

Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F


Search For </head> code:


Copy below code and paste it just before the </head> tag.


<!--IMAGE-OPACITY-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>




Now you have to add class="linkopacity" inthe normal image code.Like below


<a class="linkopacity" href="http://bloggerbolt.blogspot.com/" target="_blank" alt="BLOGGERBOLT"><img src="http://1.bp.blogspot.com/_JUJEXEamsyU/SqNcKHhf-LI/AAAAAAAAAcA/Bfu9AxsuObY/s400/twitter_128x128.png" /></a>

2 comments :

  1. hi

    i changed the opacity in my wrappers and it washed out the text and pictures...can you help please?

    amandaleefinch.blogspot.com

    thank you

    ReplyDelete
  2. @ HI Amanda-Lee :) Welcome to P "n" P

    So you are facing problem in applying this CSS based Hack in your site.Actually it is very simple CSS hack and must work in all situations

    Here i am giving you an other code just use it And Reply with your Result here

    Here we go.

    Replace ]]></b:skin> with below code in your Template


    .rsociales ul {
    display:inline;
    margin:0pt !important;
    padding:0pt !important; }
    .rsociales li {
    background:transparent none repeat scroll 0%;
    display:inline;
    list-style-type:none;
    margin:0pt;
    padding:2px; }
    .rsociales img {
    border:0pt none;
    float:none;
    margin:0pt;
    padding:0pt; }
    .rsociales-sobre { opacity:0.4; }
    .rsociales-sobre:hover { opacity:1; }


    ]]></b:skin>


    And try to use Below code to give image with effect


    <img src="http://4.bp.blogspot.com/_JUJEXEamsyU/SvWOoK_c1iI/AAAAAAAAAy4/JiugOsdVdDw/57screen-cut.png" class='rsociales-sobre'/>


    See demo and code used In this blog http://tecksip.blogspot.com/

    Thanks for your comment :)

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)