Wordpress post img hover effect.

Scott R · 01-14-2013, 10:57 AM

I am trying to get each post to hover individually not all together. This is what I have so far. How do I get it to select each individual post not all of them?
source = http://www.ScottReinmuth.com/portfolio

Code:

$(document).ready(function(){
	$(".portfolio-thumb").mouseenter(function(){
		$(".portfolio-hover").fadeIn("slow");
	});
	$(".portfolio-thumb").mouseleave(function(){
		$(".portfolio-hover").fadeOut("slow");
	});
});

vwphillips · 01-14-2013, 04:24 PM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript" src="http://www.scottreinmuth.com/wp-content/themes/scottreinmuthcom/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
   var $els = $(".portfolio-hover");
   $els.each(function(){
      $(this).mouseenter(function(){ $(this).fadeIn("slow");  });
      $(this).mouseleave(function(){ $(this).fadeOut("slow");  });
   });
 });
</script>
</head>

<body>
<img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
</body>

</html>

Scott R · 01-14-2013, 05:37 PM

Quote:

Originally Posted by vwphillips

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript" src="http://www.scottreinmuth.com/wp-content/themes/scottreinmuthcom/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
   var $els = $(".portfolio-hover");
   $els.each(function(){
      $(this).mouseenter(function(){ $(this).fadeIn("slow");  });
      $(this).mouseleave(function(){ $(this).fadeOut("slow");  });
   });
 });
</script>
</head>

<body>
<img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img class="portfolio-hover" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
</body>

</html>

I understand what is going on here but for some reason it is not working. Any suggestions? Now the title wont even show. I think I may have something screwed up on my site but I'm not sure. The slide effects never work either on my site for some reason. Maybe I have an old jQuery version?

Old Pedant · 01-15-2013, 03:17 AM

You will have to show your actual code instead of just re-posting Vic's code.