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 fade background image so links/text is visible? (USING jQuery)

View previous topic View next topic Go down

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

Post by Monikita on 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

Monikita
Forumember

Female Posts : 50
Reputation : 0
Language : English
Location : Lithuania

http://seoul-arts.123.st/

Back to top Go down

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

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

I do see that 3 links HY, they're working fine with me Smile.

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

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

Post by kirk on 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="http://i42.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


kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

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

Post by Monikita on 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

Monikita
Forumember

Female Posts : 50
Reputation : 0
Language : English
Location : Lithuania

http://seoul-arts.123.st/

Back to top Go down

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

Post by kirk on 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/

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

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

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

OK.
Thank you for your help, I'll trying to find a solution ^^

Monikita
Forumember

Female Posts : 50
Reputation : 0
Language : English
Location : Lithuania

http://seoul-arts.123.st/

Back to top Go down

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

Post by E-Mark on 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

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

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

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

IT WORKS!
THANK YOU SOOO MUCH! cheers

Monikita
Forumember

Female Posts : 50
Reputation : 0
Language : English
Location : Lithuania

http://seoul-arts.123.st/

Back to top Go down

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

Post by kirk on 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

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

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

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

whether it can be used in phpBB2? Very Happy


sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

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

Post by kirk on 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

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

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