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)
0 comments:
Post a Comment