Jquery - Fade in text, over image fade out

neodjandre · 10-18-2011, 05:29 PM

Hello,

Firstly, i am a complete newbie when it comes to Jquery!

Please look at: http://www.greekconcierge.com/event-services.php

I have built a hidden div as you can see in the source code which contains some text. I have done these for the first two images

I would like when a user hovers over each image, the image to fade out with the text div for that image to fade in.

Then when the user moves the mouse out, the text div should fade out and the image should fade in.

Could someone please recommend a solution to this?

many thanks,
Andy

harbingerOTV · 10-19-2011, 03:21 PM

See if this gives you a little help:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>neodjandre</title>

<style type="text/css">
.picsText {
	display: none; 
	width: 180px; 
	height: 121px;
	position: absolute;
	top: 0;
}
.mediumtx {
    color: #222;
    font-family: verdana,arial,sans-serif;
    font-size: 0.87em;
}
div#pics {
	position: absolute;
	top: 200px;
}
</style>

</head>
<body>

<!-- TEXT FOR VENUE -->
<div id="venue" class="picsText">
<p class="mediumtx" align="left">
Researching for the ideal venue for your event can be one of the most 
daunting tasks you will be faced with. Greek Concierge has the right 
contacts to make this happen.
</p>
</div>

<!-- TEXT FOR THEME -->

<div id="theme" class="picsText">
<p class="mediumtx" align="left">
Getting the theme right is important to attract more guests at your 
events. We have many ideas to choose from - all you need is to decide 
which one is right for the moment you are trying to create. 
</p>
</div>

<div id="pics">
	<img src="http://www.greekconcierge.com/images/events-venue.png"  title="" alt="Events London Venue" rel="venue" >  
	<img src="http://www.greekconcierge.com/images/events-theme.png"  title="" alt="Events London Theme" rel="theme"> 
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#pics img').each(function(){
		$(this).hover(function(){
			$(this).css({opacity: 0});
			$('#'+$(this).attr('rel')).fadeIn(400);
			return false;
		}, function(){
			$(this).css({opacity: 1});
			$('#'+$(this).attr('rel')).fadeOut(400);
		});
	});	 
}); 
</script>

</body>
</html>