bavotasan.com » hover http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Amazing Hover Effects with CSS3 http://bavotasan.com/2011/amazing-hover-effects-with-css3/ http://bavotasan.com/2011/amazing-hover-effects-with-css3/#comments Thu, 13 Jan 2011 17:34:46 +0000 c.bavota http://bavotasan.com/?p=3081 I have received a lot of questions lately about hover effects and how you can execute them using only CSS. There was a time when you would have to use jQuery to really make your effect stand out, but now CSS3 has some pretty amazing properties that help designers create some lightweight effects that truly stand out.

Box Shadow

This effect will create a shadow around your div container when you hover over it:

CSS:

div.shadow {
	width: 300px;
	margin: 20px;
	border: 1px solid #ccc;
	padding: 10px;
	}
 
div.shadow:hover {
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	}

HTML:

<div class="shadow">
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.
</div>

DEMO:

Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.

That one’s pretty simple and straightforward, but still kind of cool. It can also be used on images.

Opacity

Having something fade in on a hover can be seen almost anywhere on the web.

CSS:

img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	
 
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}

HTML:

<img src="http://bavotasan.com/wp-content/uploads/2011/01/spiral.jpg" width="550" height="366" alt="" class="opacity" />

DEMO:

If you want to create an even cooler opacity fade effect, you can take advantage of the new transition property. Note, this will only work in Webkit browsers such as Chrome and Safari.

CSS:

img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
 	-webkit-transition: opacity 1s linear;
	}	
 
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
 	-webkit-transition: opacity 1s linear;
	}

DEMO:

(this one only works in Chrome or Safari)

The Switch and/or Reveal

I have seen a lot of sites use an effect where something is revealed when you hover over an element. This one needs a bit more CSS and HTML since it requires two elements that sit on top of one another. I’m using text and an image in the example below but it can be two images, links or anything you want. Just remember that both elements need to use absolute positions or the effect will not work properly.

CSS:

div.top {
	margin: 20px 0;
	position: relative;
	width: 120px;
	height: 70px;
	border: 1px solid #aaa;
	overflow: hidden;
	}	
 
	div.top div {
		width: 100px;
		height: 50px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		background: #fff;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	display: none;
	}

HTML:

<div class="top">
	<div class="first">Hover over me to see something happen</div>
    <div class="second"><img src="http://bavotasan.com/wp-content/uploads/2011/01/happyface.jpg" alt="" height="50" width="50" /></div>
</div>

DEMO:

Hover over me to see something happen

The above example doesn’t use CSS3 since it is just taking advantage of the display property. Let’s see how CSS3 can make this effect stand out.

CSS:

div.top {
	margin: 20px 0;
	position: relative;
	width: 120px;
	height: 70px;
	border: 1px solid #aaa;
	overflow: hidden;
	}	
 
	div.top div {
		width: 100px;
		height: 50px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		background: #fff;
   		-webkit-transition: left 1s ease-in-out;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	-webkit-transition: left 1s ease-in-out;
	left: -122px;
	}

DEMO:

Hover over me to see something happen

(this one also only works in Chrome or Safari)

You can have the slide work in any direction by either use the top property with a positive or negative number, or switching up the left property to use a positive number.

Position

A very simple effect that is often used on lists is to have the item slide over as your hover.

CSS:

ul.slide li:hover {
	padding-left: 5px;
	}

HTML:

<ul class="slide">
    <li><a href="http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li>
    <li><a href="http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li>
    <li><a href="http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li>
    <li><a href="http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li>
    <li><a href="http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li>
</ul>

DEMO:

Now let’s add some CSS3.

ul.slide li {
	padding-left: 0;
	-webkit-transition: all 0.5s ease-in-out;
	}
 
ul.slide li:hover {
	padding-left: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	}

(once again this only works in Chrome or Safari)

Sadly, not all browsers are up to snuff in regards to CSS3, but as time passes most will release updates that take advantage of all the new properties and effects that have been released.

]]> http://bavotasan.com/2011/amazing-hover-effects-with-css3/feed/ 19 Using jQuery for a Simple Animated Fade Effect http://bavotasan.com/2010/jquery-simple-animated-fade-effect/ http://bavotasan.com/2010/jquery-simple-animated-fade-effect/#comments Mon, 15 Mar 2010 19:57:26 +0000 c.bavota http://bavotasan.com/?p=1817 I know I have already done a fade effect between two images with jQuery, but here is a quick little piece of code that will just add a nice animated fade effect to single images. Whenever a person hovers over an image, we will use jQuery to lower the opacity to make it appear lighter. Easy and not that impressive but still pretty cool.

Make sure you first call jQuery.

<script type='text/javascript' src='jquery.js'></script>

Then just add the following code and all your images will have a slight fade when you hover over them.

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>

If you only want this to occur on certain images than just make sure to change the first jQuery selector to the class name of the images your want this effect to affect.

Try it out below:

]]> http://bavotasan.com/2010/jquery-simple-animated-fade-effect/feed/ 13 Using jQuery to make an Expandable Code Box for WP-Syntax http://bavotasan.com/2009/using-jquery-to-make-an-expandable-code-box-for-wp-syntax/ http://bavotasan.com/2009/using-jquery-to-make-an-expandable-code-box-for-wp-syntax/#comments Mon, 02 Nov 2009 17:43:00 +0000 c.bavota http://bavotasan.com/?p=1440 jqueryYou may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary‘s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

We need to make a few minor changes to the plugin code to get this to work. After you have downloaded, installed and activated the plugin, open up wp-syntax.php and go to line #113:

113
114
115
116
117
118
119
120
121
122
123
124
125
126

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
    }

We need to add a table to the second output.

113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<table><tr><td>";
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
        $output .= "</td></tr></table>";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

1
2
3
4
5
6
7

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

1
2
3
4
5
6
7
8

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your <head> tags.:

<?php wp_enqueue_script("jquery"); ?>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
</script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier

]]> http://bavotasan.com/2009/using-jquery-to-make-an-expandable-code-box-for-wp-syntax/feed/ 9