Image opacity στις εικόνες σας

Το Image opacity είναι βασικά ένας απλός css κώδικας, που όταν εγκατασταθεί στο πρότυπό σας, μπορεί να χρησιμοποιηθεί για να δημιουργήσει στις όποιες εικόνες σας επιθυμείτε, ένα opacity effect. Αυτές οι εικόνες μπορούν να βρίσκονται οπουδήποτε στο blog σας, είτε στην ανάρτηση μέσα, είτε στις μπάρες σας δεξιά κι αριστερά. Το opacity δημιουργεί ένα όμορφο effect στις εικόνες σας, που στην αρχή δείχνουν θαμπές, και παίρνουν το κανονικό τους χρώμα όταν περάσετε απο πάνω τους με το mouse σας.

Demo:

Εικόνα δίχως opacity:

Εικόνα με opacity:

Πώς το πετυχαίνετε.
1. Πηγαίνετε στην διάταξη -> Επεξεργασία HTML
2. Βρείτε το </head> και ακριβώς απο ΠΑΝΩ του κάντε copy τον παρακάτω κώδικα:

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

3. Πατήστε Αποθήκευση προτύπου.

Τώρα, κάθε φορά που θα θέλετε να βάλετε το opacity effect σε κάποια εικόνα σας, το μόνο που χρειάζεται να κάνετε, είναι να προσθέσετε το: class="linkopacity" στον κώδικα της εικόνας σας, και ακριβώς μετά το αρχικό <a> tag.

Δηλαδή:
Παράδειγμα 1ο, κώδικας εικόνας, δίχως το opacity effect

<a href="http://twitter.com/aaton" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3h3v7BQ6vgwyq2oHEgb2zmO4BI3262NE2uDTc_a-n7b2KNCcMnTLwdBZ6tfRtMXZAHlfssyqYSuuJoJQkZ94507ZWiqWo2KLJ9L83bYTX6FI8emLg0GNf_uaUGbBt1i4Zq7fIlPUCJOM/s640/follow-me-on-twitter-big-icon.png" /></a>

Παράδειγμα 2ο, κώδικας εικόνας, με το opacity effect

<a class="linkopacity" href="http://twitter.com/zainali88" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3h3v7BQ6vgwyq2oHEgb2zmO4BI3262NE2uDTc_a-n7b2KNCcMnTLwdBZ6tfRtMXZAHlfssyqYSuuJoJQkZ94507ZWiqWo2KLJ9L83bYTX6FI8emLg0GNf_uaUGbBt1i4Zq7fIlPUCJOM/s640/follow-me-on-twitter-big-icon.png" /></a>

Εάν παρ' όλα αυτά συναντήσετε κάπου δυσκολία, αφήστε ένα σχόλιο.
Καλή επιτυχία!

Το κείμενο είναι αναδημοσίευση απο το: Α! μπε μπα Blog! Το μπινελικοδρόμιο..
http://nikos63.blogspot.com/2010/06/image-opacity.html#ixzz0sVMN4sqN

Ευχαριστώ πολύ για την αναδημοσίευση(AATON)