Fancy Thumbnail Hover Effect

Recently I was checking out some nice flash galleries and came across an effect that
I really liked. I had a sudden urge to duplicate that similar effect but using my bread
and butter (CSS and jQuery). I thought I’d share this and maybe some of you can
find it useful.

View Demo

Build the Foundation – XHTML

Our markup will be fairly simple, just an unordered three columned list.

<ul class="thumb">
 <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dress it Up – CSS

Pay close attention to the positioning properties between the list item and the image. We
have to make sure that the hovered image must be on top of the other images, so this part
is key.

ul.thumb {
 float: left;
 list-style: none;
 margin: 0; padding: 10px;
 width: 360px;
}
ul.thumb li {
 margin: 0; padding: 5px;
 float: left;
 position: relative;  /* Set the absolute positioning base coordinate */
 width: 110px;
 height: 110px;
}
ul.thumb li img {
 width: 100px; height: 100px; /* Set the small thumbnail size */
 -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
 border: 1px solid #ddd;
 padding: 5px;
 background: #f0f0f0;
 position: absolute;
 left: 0; top: 0;
}
ul.thumb li img.hover {
 background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
 border: none; /* Get rid of border on hover */
}

*Note – For more information about this property: -ms-interpolation-mode: bicubic, refer to Chris Coyier’s Bicubic Scaling fix for IE. For those who are using PNG files as the background, refer to my previous article, “PNG Transparency Fix in IE6“.

Bring it to Life – jQuery

Basically all we are doing is animating the thumbnail’s size, absolute positioning
coordinates (vertical alignment w/ css), and padding when we hover over. During
this animation, we also switch the value of the z-index, so that the selected image
stays on top of the rest.

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'}); /*Add a higher z-index

 value so this image stays on top*/ 
 $(this).find('img').addClass("hover").stop() /* Add class

 of "hover", then stop animation queue buildup*/
  .animate({
   marginTop: '-110px', /* The next 4 lines

 will vertically align this image */ 
   marginLeft: '-110px',
   top: '50%',
   left: '50%',
   width: '174px', /* Set new width */
   height: '174px', /* Set new height */
   padding: '20px'
  }, 200); /* this value of "200" is the speed of

 how fast/slow this hover animates */

 } , function() {
 $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
 $(this).find('img').removeClass("hover").stop()  /* Remove

 the "hover" class , then stop animation queue buildup*/
  .animate({
   marginTop: '0', /* Set alignment back to default */
   marginLeft: '0',
   top: '0',
   left: '0',
   width: '100px', /* Set width back to default */
   height: '100px', /* Set height back to default */
   padding: '5px'
  }, 400);
});

*Note – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation
Queue Buildup” at www.LearnjQuery.com

View Demo

Conclusion

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch
up the absolute potion coordinates, you can create various ways the hover effect pops
out as well. If you have any questions or comments, please don’t hesitate to let me know!

Page Peel Effect with CSS

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

View Demo

1. HTML – Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an tag.

<div id="pageflip">
<a href="#">
<img src="page_flip.png" alt="" />
<span class="msg_block">Subscribe via RSS</span>
</a>

</div>

2. CSS – Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:

The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.

#pageflip {
 position: relative;
}
#pageflip img {
 width: 50px; height: 52px;
 z-index: 99;
 position: absolute;
 right: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
 width: 50px; height: 50px;
 position: absolute;
 z-index: 50;
 right: 0; top: 0;
 background: url(subscribe.png) no-repeat right top;
 text-indent: -9999px;
}

Note that the “msg_block” height is off by 2px compared to the image property – this is taking in
consideration of the drop shadow that the image has.

3. jQuery – Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.

$("#pageflip").hover(function() { //On hover...
 $("#pageflip img , .msg_block").stop()
  .animate({ //Animate and expand the image and the 

msg_block (Width + height)
   width: '307px',
   height: '319px'
  }, 500);
 } , function() {
 $("#pageflip img").stop() //On hover out, go back to 

original size 50x52
  .animate({
   width: '50px',
   height: '52px'
  }, 220);
 $(".msg_block").stop() //On hover out, go back to original

 size 50x50
  .animate({
   width: '50px',
   height: '50px'
  }, 200); //Note this one retracts a bit faster (to prevent

 glitching in IE)
});

Conclusion

The concept is very simple and may come in handy one day. If you have any questions or know of other techniques, please don’t hesitate to let me know~

View Demo

Simple Tabs w/ CSS & jQuery

I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner. For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there. View Demo Step1. Wireframe – HTML & CSS Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I  used generic names like “tab1″ so its easier to understand. In reality, you should be  using keywords so it can semantic and also benefit you in SEO. HTML <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div>     If you have tried to create tabs before with CSS, you probably have experienced some frustration with getting the borders on the tabs correctly aligned. Below is a common problem that most people will run into. Here is a solution I came up with that took care of this annoying issue. Check out the image below and also take a look at the CSS and its supporting comments for a better understanding. Tabs CSS ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of  the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look  with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to  the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } Tab Content CSS .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } Step 2. Activate the Tabs – jQuery For those who are not familiar with jQuery, check out their site for a general  overview. The following script contains comments explaining which jQuery actions are being performed. $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show();  //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href");   //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); });  View Demo Conclusion So there you have it, a nice and simple tab function with CSS and jQuery. If you have any questions, comments, or suggestions, please feel free to let me know!