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

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 ;( )

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

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

.

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 .

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

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

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/

by Monikita May 6th 2013, 2:31 pm

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

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: