The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to change image opacity when mouse on

View previous topic View next topic Go down

How to change image opacity when mouse on

Post by Enigmam7 on September 22nd 2012, 11:23 am

So i wanna make a few images in my widgets change their opacity when the mouse is on them.I looked in google about the code but haven't found anything that is working.Hope you guys know the code, thank you in advance.

Enigmam7
Forumember

Male Posts : 46
Reputation : 1
Language : Bulgarian

Back to top Go down

Re: How to change image opacity when mouse on

Post by nextlevelgaming on September 22nd 2012, 2:23 pm

Code:
.transparent_class {  /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}

just change the class of [.transparent_class] above to what image class you want to change it to and see if that will work for you. The css is cross browser friendly.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: How to change image opacity when mouse on

Post by Enigmam7 on September 22nd 2012, 10:35 pm

Not working.I need something that can be added to <a href=><img src= /></a> tag so when the mouse is on that pic the opacity changed.Or something that be added to css and then some code that be added to the tag above.

Enigmam7
Forumember

Male Posts : 46
Reputation : 1
Language : Bulgarian

Back to top Go down

Re: How to change image opacity when mouse on

Post by nextlevelgaming on September 22nd 2012, 10:47 pm

Don't use inline styling, unless absoluely needed. That code above should work, you have to do this for hover state

Code:
.yourclassname:hover{

to first see if the code works for you use this

Code:
img:hover{ /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}

This will make all tags with <img> to have hover state opacity half. Once you know it works, find the class that you need to make have opacity.

then once found add

Code:
img .class{ /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum