The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

HTML hover effect

4 posters

Go down

Solved HTML hover effect

Post by GummyBear 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
avatar
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

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

so i should put that tag in all images??

im talking to his.. see ~> http://animeph.4umer.com/
avatar
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

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

where should i paste that? in body tag?
avatar
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML hover effect

Post by levy 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
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: HTML hover effect

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

i only want it to my html loading page.
avatar
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 July 9th 2013, 11:40 am

solved. thanks
avatar
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 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


HTML hover effect Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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