HTML hover effect Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

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.
4 posters

    HTML hover effect

    avatar
    GummyBear
    Forumember


    Posts : 71
    Reputation : 2
    Language : English

    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
    Ange Tuteur
    Ange Tuteur
    Forumaster


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

    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
    avatar
    GummyBear
    Forumember


    Posts : 71
    Reputation : 2
    Language : English

    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/
    Ange Tuteur
    Ange Tuteur
    Forumaster


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

    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)
    avatar
    GummyBear
    Forumember


    Posts : 71
    Reputation : 2
    Language : English

    Solved Re: HTML hover effect

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

    where should i paste that? in body tag?
    Ange Tuteur
    Ange Tuteur
    Forumaster


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

    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.
    levy
    levy
    Hyperactive


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

    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
    avatar
    GummyBear
    Forumember


    Posts : 71
    Reputation : 2
    Language : English

    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

    Solved Re: HTML hover effect

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

    solved. thanks
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51518
    Reputation : 3523
    Language : English
    Location : United States

    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.