How to fade background image so links/text is visible? (USING jQuery) Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return 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.
The forum of the forums
4 posters

    How to fade background image so links/text is visible? (USING jQuery)

    Monikita
    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania
    • Post n°1

    Solved How to fade background image so links/text is visible? (USING jQuery)

    Post by Monikita May 5th 2013, 10:42 am

    Hey guys,

    I have this little problem~ I'm trying to make an image fade away to show the text. I tried using jQuery http://jsfiddle.net/purmou/e2E5z/

    I places all the codes
    HTML
    Code:
    <div class="container">
        <img src="http://i42.tinypic.com/6ie000.jpg" />
        <div class="overlay"><a href="#">HY</a><br><a href="#">HY</a><br><a href="#">HY</a><br></div>
    </div>

    CSS
    Code:
    .overlay {
        position:absolute;
        margin-top:-205px;
        width:200px;
        height:200px;
        background-color:black;
        opacity:0;
    }

    JAVA
    Code:
    $(".overlay").hover(function(){
        $(this).stop().fadeTo(300,0.8); 
    },function(){
        $(this).stop().fadeTo(300,0);
    });

    But still, I do not get the effect that I need to get on my forum ( http://testeris.4umer.com/forum it's only a simple image on the right side ;( )
    Maybe I'm doing something wrong or maybe it's not possible to use this ? (I'm a newbie at these things ;( )


    Last edited by Monikita on May 6th 2013, 2:41 pm; edited 2 times in total
    • Back to top
    E-Mark
    E-Mark
    E-Mark
    Active Poster


    Male Posts : 1411
    Reputation : 169
    Language : English
    Location : Bitcoin
    • Post n°2

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by E-Mark May 5th 2013, 12:42 pm

    I do see that 3 links HY, they're working fine with me Smile.
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°3

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by kirk May 6th 2013, 5:16 am

    For the links to work you will have to add the url to where i have it marked. and then place what ever text you want where it says text here.

    <div class="container">
    <img src="https://2img.net/h/oi42.tinypic.com/6ie000.jpg" />
    <div class="overlay"><a href="URL HERE">TEXT HERE</a><br><a href="URL HERE"> TEXT HERE</a><br><a href="URL HERE">TEXT HERE</a><br></div>
    </div>

    I Guess you are adding the css to the css sheet, the javascript to javascript page management, then the html to where you want it on your forum?

    If so and that's not working? You may have to put in a complete html code with <head> and <body> tags importing the css with style tags and the javascript with import javascript tags or whatever they are called.. lol.

    Let me know how you are doing it first before we go there because it may not even be necessary to do it like i am explaining with the <head> and <body> tags.

    E-Mark wrote:I do see that 3 links HY, they're working fine with me Smile.

    I guess you mean you can see the text not clickable links right Smile

    • Back to top
    Monikita
    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania
    • Post n°4

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by Monikita May 6th 2013, 7:14 am

    Well, I am going to Modules > Javascript codes management > There creating a new Javascript and then placing this code
    Code:
    $(".overlay").hover(function(){
        $(this).stop().fadeTo(300,0.8); 
    },function(){
        $(this).stop().fadeTo(300,0);
    });

    After that I go to CSS Stylesheet and there next to other codes I place
    Code:
     .overlay {
        position:absolute;
        margin-top:-205px;
        width:200px;
        height:200px;
        background-color:black;
        opacity:0;
    }
    And in the end I place the last code
    Code:
    <div class="container">
    <img src="http://i42.tinypic.com/6ie000.jpg" />
    <div class="overlay"><a href="http://seoul-arts.123.st/t1161-veikejai#85044">VEIKĖJAI</a><br><a href="http://seoul-arts.123.st/t1161-veikejai#85044"> TEXT HERE</a><br><a href="http://seoul-arts.123.st/t1161-veikejai#85044">TEXT HERE</a><br></div>
    </div>
    at Homepage message

    But sadly there is only image showing without text or anything . Sad
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°5

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by kirk May 6th 2013, 2:25 pm

    Yeah beats me? i was trying a few different things and nothing works, only a image that's all, no fade and no text/links.

    they give no directions there what so ever, and is like it is missing another part. i would just search something else that will give you proper directions.

    Not sure what i have missed but tried several ways and nothing Sad

    it could be the css is not the right css for the forum? As far as the little bit of JS they have.. no idea if that's all that is needed or if there is indeed another part that has to be hosted or imported?

    I even tried looking at the source coding and used some development tools and still came up with nothing , so once again not sure what i missed Sad

    May be try searching on here to try to find better scripts,
    http://w3schools.com/
    • Back to top
    Monikita
    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania
    • Post n°6

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by Monikita May 6th 2013, 2:31 pm

    OK.
    Thank you for your help, I'll trying to find a solution ^^
    • Back to top
    E-Mark
    E-Mark
    E-Mark
    Active Poster


    Male Posts : 1411
    Reputation : 169
    Language : English
    Location : Bitcoin
    • Post n°7

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by E-Mark May 6th 2013, 2:34 pm

    Let's give this a try. banana
    Use this one instead: (Put this on your Homepage Message/Widgets, depends on you)
    Code:
    <div class="container">
        <img src="http://i42.tinypic.com/6ie000.jpg" />
        <div class="overlay"><a href="#">HY</a><br><a href="#">HY</a><br><a href="#">HY</a><br></div>
    </div>
    <script>
    jQuery(".overlay").hover(function(){
        jQuery(this).stop().fadeTo(300,0.8); 
    },function(){
        jQuery(this).stop().fadeTo(300,0);
    });
    </script>

    Then remove the JS you put on JS Management.

    Then for the CSS, use this instead:
    Code:
    .overlay {
        margin-top:-200px;
        width:200px;
        height:200px;
        background-color:black;
        opacity:0;
    }

    bye
    • Back to top
    Monikita
    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania
    • Post n°8

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by Monikita May 6th 2013, 2:38 pm

    IT WORKS!
    THANK YOU SOOO MUCH! cheers
    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°9

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by kirk May 6th 2013, 2:51 pm

    LOL Razz

    I tried that almost the same exact way as well accept for the css how he has it..

    Nice Job E-Mark rock keep up the good work thumright

    Topic Solved & Locked
    • Back to top
    sasukekun
    sasukekun
    sasukekun
    Forumember


    Posts : 253
    Reputation : 6
    Language : English
    • Post n°10

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by sasukekun May 6th 2013, 3:03 pm

    whether it can be used in phpBB2? Very Happy

    • Back to top
    kirk
    kirk
    kirk
    Forumaster


    Male Posts : 11037
    Reputation : 653
    Language : English,Vulcan,Klingon, Romulan,& Gorn
    • Post n°11

    Solved Re: How to fade background image so links/text is visible? (USING jQuery)

    Post by kirk May 6th 2013, 3:05 pm

    mostone wrote:whether it can be used in phpBB2? Very Happy


    yeah works fine in phpbb2 as well Very good
    • Back to top