Amazing Hover Effects with CSS3

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:

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.

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:


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:

Hover over me to see something happen

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:


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.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie