How To Change Image Colour On Hover


#1

Hello to all to i want to ask that i have seen many sites adding site powered by widget in which image changes its colour like in the image shown -

So I Want to ask how to add this type of effect in my blog. Please Give Me Answer @Mohammad .

----------------------------------------------------------------------------Thanks------------------------------------------------------------------------------------------


#2

you have ask excellent question it is really informative and thank you for ask this question and wait for expert


#3

Do You Have An Answer To This Question Please Give If You Know It


#4

Check this Link which is briefly Explaned by MBT admin Mr. Mustafa

Top 10 Widely Used Image Hover Effects In Blogosphere!

I think It will help you…!!! :smile:


#5

Hmm Excellent Question. I have the answer of this :smile:

First, Use this CSS and paste it above ]]></b:skin>

.image a.any{background:transparent url(YOUR_IMAGE_URL) no-repeat;font-size:0;cursor:pointer;padding:0;}
.image a.any:hover{background:transparent url(YOUR_IMAGE_YOU_WANT_ON_HOVER);}

Now, add following code where you wanna image to show:

<a class='any' href='http://www.bla.com' target='_blank'></a>

Over! This will work fine! :smile:


#6

It’s a very simple, here is the working live demo on jsfiddle which is Mr. Mustafa using on his blog. by following this you can create yours.

https://jsfiddle.net/owoqc6n7/

note:- replace all links with your own links.


#7

Thank You Very Much For Giving Answer Of This Question


#8

Thank You Very Much For Giving Answer Of This Question To Me


#9

Its Not Working I Tried It Many Times But No Image Is Showing Up


#10

Can you put the code here that you putted on your template?


#11

First I tried In A simple html page like this-

<style> .image a.any{background:transparent url(http://png-3.findicons.com/files/icons/832/social_and_web/64/blogger.png) no-repeat;font-size:0;cursor:pointer;padding:0;} .image a.any:hover{background:transparent url(http://png-1.findicons.com/files/icons/818/aquaticus_social/64/blogger.png);}

</style>

Then Html Code- Powered by-

 <a class='any' href="http://blogger.com" target='_blank'></a>

But It Is Not Working ???


#12

what? I think your forgot to mark it as code.


#13

I Have Edited It Check It Now Please Check It


#14

What? Ok. This is what mohammad bro is using on MBT.

Above ]]></b:skin>: /-----------Logos-----/

.logos a{display:block;height:25px;width:30px;float:left;margin-right:10px;background:transparent url(http://1.bp.blogspot.com/-GxQIDP0eQEw/UBz65_YXUmI/AAAAAAAAHPI/8gQB2pXcRr4/s400/logos2.png) no-repeat;font-size:0;cursor:pointer;padding:0}
.logos a.hostgator{background-position:0 -105px}
.logos a.hostgator:hover{background-position:0 -70px}
.logos a.blogger{background-position:0 -35px}
.logos a.blogger:hover{background-position:0 0}
.logos a.css3{background-position:0 -175px}
.logos a.css3:hover{background-position:0 -140px}

And on Footer:

<span class='logos'>
<a alt='Blogger' class='blogger' href='http://www.blogger.com' target='_blank' title='Hosted at Blogger'></a>
<a alt='Sub-domains on Hostgator' class='hostgator' href='http://go.mybloggertricks.com/hostgator' rel='nofollow' target='_blank' title='Sub-domains on HostGator'></a>
<a alt='CSS3' class='css3' title='CSS3 powered'></a>
</span>

You can customize these codes and make your own.


#15

I Don’t Know This . But There is only one image url can you explain it to me???


#16

This one image contain all icons and mohammad bro set background-position:0 -70px to show the correct image on hover.


#17

Ok I Will Make Image But How Do I Know What Is Correct background-position for hover image???


#18

@ngtechzone Yes there is just one image but if you check the image all icons are in it. Have you checked the code

.logos a.hostgator{background-position:0 -105px} .logos a.hostgator:hover{background-position:0 -70px} .logos a.blogger{background-position:0 -35px} .logos a.blogger:hover{background-position:0 0} .logos a.css3{background-position:0 -175px} .logos a.css3:hover{background-position:0 -140px}

In each case background position is changed and it’s all due to background positions. Background positions is aligning the icons on their respective positions. Background positions are set for each icon default and on hover, that’s why the icon changes on hover.


#19

try to measure the images length from top and you will find -70px lenth of colored hostgator image from top.


#20

But How I Know What What Is The Background Position Of Each Image?? ex- if i am having another big image how will i know what is correct position of each image???