Not long ago, I wrote a post about how you can create a filterable portfolio, in WordPress, using a jQuery plug in. And, since I love the ability to create subtle nuances for the user, I decided to extend this tutorial and show you how to include a hover effect animation for your thumbnails.
The Goal
What I want to achieve is actually quite simple and I am sure you have seen the effect before. When a user hovers over a thumbnail in the portfolio, I want the opacity value of the remaining images reduced to a percentage of my choosing while leaving the hovered image opacity at 100%. I first set out to conquer this subtle animation using CSS only but, with poor cross browser support for opacity, I only ended up with really bad hacks and workarounds.
Once the CSS experiment proved to be a failure, I knew that jQuery would be perfect for the task. And, how right I was. The code ended up being minimal (less than 10 lines) and I could retain my clean and lean markup.
Step 1: Get the latest version of jQuery
The first thing you want to always do is make sure you are running the latest version of jQuery on your site (version 1.4.2 as of the publication). You can do this by either downloading the most recent version and uploading the file to your server or by hotlinking to the latest version directly from a CDN (Content Delivery Network) like Google Ajax API. I prefer the latter. Simply add the following code between the opening and closing <head> tags of your document.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
Step 2: Write the HTML Markup and CSS Styles
There is no need for me to spend much time designing and coding a complicated layout for this demo. Suffice to say, your portfolio list should semantically be wrapped in an unordered list. The design and presentation of your portfolio is left up to your imagination. For demo purposes, I have written the following HTML code:
<ul id="portfolio-list" class="clear">
<li><a href="#" title="Koopon Website Design"><img src="images/koopon.jpg" alt="Koopon Website" width="210" height="140" /></a></li>
<li><a href="#" title="Patriot Pride Corp Logo Design"><img src="images/ppcorp.jpg" alt="Patriot Pride Corp Logo" width="210" height="140" /></a></li>
<li><a href="#" title="Mazaif Packaging Design"><img src="images/mazaif.jpg" alt="Mazaif Packaging" width="210" height="140" /></a></li>
<li><a href="#" title="Women Working Logo Design"><img src="images/womenworking.jpg" alt="Women Working Logo" width="210" height="140" /></a></li>
</ul>
There is nothing overly special here. The <ul> gets an id name of “portfolio-list” and a class name of “clear”, which will clear the float at the end of the unordered list. Everything else is pretty straightforward. I will then add the following styles:
.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
#portfolio-list li { float: left; margin: 0 10px; }
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid #4f8603; width: 210px; height: 140px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: #315301; }
All I have done here is float the list items to the left and given them a margin of 10px on the left and right sides. All of the list item links will have a 5px border of green that will change to a darker hue on hover. Lastly, you will notice my little “clearing fix”, which is most definitely a hack, but it works and I never leave home without it.
Step 3: Write the jQuery to animate the portfolio
The amazing part of this entire journey is that it will only take 8 lines of code to accomplish our goal by using the new jQuery.delegate() method. Add the following code to your javascript file and I will explain what is happening afterwords:
jQuery(document).ready(function() {
jQuery("#portfolio-list").delegate("li", "mouseover mouseout", function(e) {
if (e.type == 'mouseover') {
jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "0.3"}, 300);
} else {
jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "1"}, 300);
}
});
});
As you can see, we are targeting all of the <li> tags inside of #portfolio-list and attaching the mouseover and mouseout events using jQuery.delegate(). Now, if the user hovers over a list item, animate all of the of the other items by reducing their opacity to 30% over 300 milliseconds. The else statement returns the opacity back to 100%.
Conclusion
There you have it. A very simple way to add a little interactivity to your portfolio with minimal amount of code. Be sure to check out the demo to see the script in action. Also, if anyone has a better script for this type of animation, please share in the comments.
K-Productions Inc. 