CodingForums.com - Wordpress post img hover effect.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Wordpress post img hover effect. (http://www.codingforums.com/showthread.php?t=285751)

Wordpress post img hover effect.

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

        });

});

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>

Quote:

Originally Posted by vwphillips (Post 1306170)

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?

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