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.
Comments
Post a Comment