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.

HTML hover effect

View previous topic View next topic Go down

Solved HTML hover effect

Post by GummyBear on July 8th 2013, 7:19 am

How am i going to add a hover effect on images to my html loading page? from non color to colored when hover?


Last edited by GummyBear on July 9th 2013, 1:59 pm; edited 1 time in total

GummyBear
Forumember

Posts : 71
Reputation : 2
Language : English

http://haxactivity.forum.com.bz

Back to top Go down

Solved Re: HTML hover effect

Post by Ange Tuteur on July 8th 2013, 12:34 pm

You will need to use a class name for the elements you wish to add a hover effect to as you cannot use pseudo selectors in inline styles, since it only has meaning in the stylesheet. I'll give you an example of adding a hover effect to an image which I used on one of my forum widgets.

For the image I used "donateb" as my class selector for CSS, please be sure to close your tags at the appropriate areas to prevent issues with your forum.
Code:
<span class="donateb"><img src="http://i38.servimg.com/u/f38/15/62/32/35/donati10.png"></span>

With .donateb as my selector, I can then modify the opacity of the image when it is hovered over using the pseudo selector :hover. You can also use the same span class for multiple images on your forum that you wish to add such a hover effect to, even in messages where :hover wasn't applicable.
Code:
.donateb{
  filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 1.0;
  }
.donateb:hover{
  filter:alpha(opacity=50);
  -moz-opacity: 0.65;
  opacity: 0.55;
  }

The above is an opacity hover effect, but I'm sure you know how to modify color and such using CSS. If you have anymore questions feel free to say. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

Post by GummyBear on July 8th 2013, 2:15 pm

so i should put that tag in all images??

im talking to his.. see ~>http://animeph.4umer.com/

GummyBear
Forumember

Posts : 71
Reputation : 2
Language : English

http://haxactivity.forum.com.bz

Back to top Go down

Solved Re: HTML hover effect

Post by Ange Tuteur on July 8th 2013, 3:24 pm

Not precisely, for that type of effect you'd use an HTML mouse over for your images. See the code below:

Code:
<img src="http://i34.servimg.com/u/f34/18/21/60/73/member10.png" onmouseover="this.src='http://i34.servimg.com/u/f34/18/21/60/73/fullme10.png'"
onmouseout="this.src='http://i34.servimg.com/u/f34/18/21/60/73/member10.png'">

onmouseover is the content displayed when the user rolls their mouse over the object.

onmouseout is the content displayed when the user rolls their mouse off the object. It will usually be the default image displayed before mouseover. You will of course be using different images to present such an effect.(i.e. dark or lighter images)

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

Post by GummyBear on July 8th 2013, 3:49 pm

where should i paste that? in body tag?

GummyBear
Forumember

Posts : 71
Reputation : 2
Language : English

http://haxactivity.forum.com.bz

Back to top Go down

Solved Re: HTML hover effect

Post by Ange Tuteur on July 8th 2013, 4:30 pm

If it is going into the body of the page, then yes. If you're making the image a link be sure to place it in between the href tags.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

Post by levy on July 8th 2013, 6:11 pm

Hello , add this code anywhere in your template.

Code:
<style type="text/css">#wrapper-200a{width:250px;float:right;} img{opacity:0.7;} img:hover{opacity:1;}</style>

Images had 0.7 opacity and when hover over they , opacity become 1

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: HTML hover effect

Post by GummyBear on July 8th 2013, 6:48 pm

i only want it to my html loading page.

GummyBear
Forumember

Posts : 71
Reputation : 2
Language : English

http://haxactivity.forum.com.bz

Back to top Go down

Solved Re: HTML hover effect

Post by GummyBear on July 9th 2013, 11:40 am

solved. thanks

GummyBear
Forumember

Posts : 71
Reputation : 2
Language : English

http://haxactivity.forum.com.bz

Back to top Go down

Solved Re: HTML hover effect

Post by SLGray on July 9th 2013, 6:45 pm

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.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