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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh182YP-sR8XdZzlOrF-fFibSeFNmISup7vIZp0OEabJSCeRz28Lg817atCwklYOZJcNmpCHYCf-jDsl_-XrIuSN7rqcNYlmC_toSSQf1lnnrukWTg6Qid7EbXx40Ea1RKa40wL4BAQ7Vo/s400/twitter_128x128.png" /></a>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh182YP-sR8XdZzlOrF-fFibSeFNmISup7vIZp0OEabJSCeRz28Lg817atCwklYOZJcNmpCHYCf-jDsl_-XrIuSN7rqcNYlmC_toSSQf1lnnrukWTg6Qid7EbXx40Ea1RKa40wL4BAQ7Vo/s400/twitter_128x128.png" /></a>
![Drag To Share | Cool Social Widget For Blogger[ Easy Install] Like Mashable Using jQuery](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEq06afLULlAMM80-A0Twg_nku0-CVYZcCHSfoLXwyo_mc2bvOTMMWsh_X_GnE6_Mn1DK5SFnn5rIpelNlWk3DofJXtB8sO4iIigOobQsEzSmGADNzn8QKIbDzqhvSkHbC91-QdQZ-i5k/s72-c/screen-cut.png)
![Auto Horizontal Image Slider[Style 1] Using jQuery For Blogger Blog](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIhB5RObh_g9GtjzU3JyQ49ekc2WTKh6-K4OHT6l4BHcg0na-E962mckeBCVEtEidPUU2KIwPhkAiOGT4xUGLUY-r5Pf9-SC2Ghc2wkHfMBgIQY6ZFQYz5f4vprXS7YJGYD0edOrtcrE/s72-c/screen-cut.png)
![[Image]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYV3gv2z4Y2XHaKgtaFQqtp8tQv8N9WDq9vSgnPjxQV3RWVqWlBLKZ8fm-_wAsydesMGMbIiDOC7CPM7bHnLzMykSvKLJCw12wERb4X9N4ac4sNCYbHRS38NrLgh8QixaTfBBh33QUiU/s320/twitter.png)
![[Image]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_Y6UTTOpjBjTOFD3F0HzGDazYEZYt6mcqV1V3Fu83F3hoLSMNccvVSA091xFd12pCuDunhlcLRORLY-0p87cnOEEo5lhT6E_V1nSkgd3NFNFd4CXnb904fFTnrT3sQOk280NTgeT2PM/s320/stumbleupon.png)
![[Image]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-PRVD0_ilfe1o7yINUflbvhi3Zi-E_3nymhb91F8asEbbgM9LLIrHKl_ek8zYN-rIC5xDe88eSd5X84n9nX4k-KSZnAel_kyjC3_M8x8nvh9kSWuCem_SGIilF80G-RAF_5c_XveFRI/s320/facebook.png)
![[Image]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgASqt4SJgdYSu9j-GliS5rs5WiJQTT3QVujwA5cPS7fFh3zlIm3Tbyv_4PwVVkwzUDgfUybNAk07qVbKlcVFhXSe0VJYN1MQt3YgZhN4cbq-dYAqpYuW3fG1bBGaqIS3i11N59pC42CA/s320/rss.png)
![[Image]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxeLbuHpJcy2CM_w-PT7NrP6qvGGwOKCwVC4f-m3oo6ZemZpxxCEwcYPmJDTgoD5vEXu1oHcImR1hFWnKn02fBdNjWYiRAD9T8W9L17LpyIVTvrxhZZhK-Sql9Klk1mK3XtaUWj5h6OAQ/s320/technorati.png)
hi
ReplyDeletei changed the opacity in my wrappers and it washed out the text and pictures...can you help please?
amandaleefinch.blogspot.com
thank you
@ HI Amanda-Lee :) Welcome to P "n" P
ReplyDeleteSo 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 :)