Flexible hovering effect for images

Here we are going to create a flexible hovering effect using CSS3 opacity property.
opacity is a CSS3 property that allows you to specify how opaque a given element
is. Coupled with the RGBA, opacity offers
another method to add transparency to the designs we create
for the web.
One of the ways to use opacity is to create simple and
flexible hover states for hyperlinked graphics, using the variation
in transparency .
We’re going to use the opacity property to not only control
the :hover and :focus treatment, but also to set the initial
level of transparency.

Before we start ,we need the graphics to be used as hyperlinks.

So open your graphics editor and create an icon as fully-white PNG

image with transparent background.

Create an html file and name as hover.html.
Now add your image in your html file with following line of code.

<a href="#"><img src="img/logo.png" alt="My logo" /></a>

Place the image inside a dark background ( here I have used #222 ).

<div id='container'>
<a href="#"><img src="img/logo.png" alt="My logo" /></a>
</div>

Now its time to add some styles.

<style>
#container {
background:#222;
width:100px;
height:100px;
text-align:center;
}
</style>

let’s add the opacity values that will dim the icons in
their default state, brightening them up a bit when hovered or
focused.

#container a img {
opacity: 0.25;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
}

Here we’re showing the images at 25% opacity, then bringing
them up to 70% opacity when hovered or focused .
Note that the opacity property doesn’t require vendor prefixes,
and will work in Safari, Chrome, Firefox, and Opera.
IE8 and below don’t support opacity, but there is a hack to achieve this.

The IE opacity hack

Opacity is supported in Internet Explorer 9
Beta, but we can also mimic the same result for older versions
of IE by using the proprietary Microsoft filter property.
use of the filter property can bring increased performance
overhead depending on where or how often it’s used.
It’s a hack—but it provides a means to an end.
Here’s how it works:

#container a img {
border: none;
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

The syntax is similar, with a value of opacity passed through
IE’s alpha filter. Note that IE8 ignores the filter property
and requires the vendor-prefixed –ms-filter with some additional
(ugly) values.

Adding a transition to the opacity swap will smooth
out that value change, and provide a bit of animated richness
that’ll tie this whole technique together.
We’ll make the transition rather quick (just 0.2 seconds) and ease it in and
then out again.

#container a img {
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

With the transition in place, we now have a simple technique
for using opacity to craft a flexible hover experience using a
single set of images.

Download source files from here...