This fade-in and fade-out effect is so simple yet it is so beautiful. Today, I’ll be teaching you how to create this cool effect using a single image that is 50% transparent on a static state but on a hover state it fade in to the full colored image. See example below:
Cool huh? 
You can also see it on my Web Design portfolio page on how I implemented this fade-in/out effect.
So lets all proceed to the details.
1. First lets load up the jQuery library to use. Insert this code within your <head> </head> tags.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
2. To make it easy for you, I’ll just use the html code I use on the above example.
<div class=”portfolio“>
<a href=”#” >
<img src=”http://farm7.staticflickr.com/6049/6380829545_c9ac99e0ef_z.jpg” border=”0″ />
</a>
</div>
To add more images just make sure you adding them with in the div class. To be exact on my example I would be adding it with in <div class=”portfolio”> </div>
3. Our next step is to make the image 50% transparent. To do this we need to style our image within the class. Add this line to your CSS file:
.portfolio img { opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ }
The above styling just made the opacity of the image under the portfolio class 50%
4. To apply some animation to this cool effect, all we need now is to add some javascripting. Add this javascript with in your <head> </head> tags.
<script type=”text/javascript”>
$(function(){
$(‘.portfolio img‘).hover(
function() {
$(this).stop().fadeTo(‘slow’, 1);
},
function() {
$(this).stop().fadeTo(‘slow’, 0.5);
}
);
});
</script>
Here are stuff to take notes in regards with the script above. I have it colored with blue so it’s easier for you to spot. The first part is telling your script to where to apply the animation. Looking at my HTML code, I want to apply it on the img inside the div class .portfolio. It kinda works like CSS . The next part as you can see is the hover state. On hover, the first function is to fade to 1 which is 100% and the 2nd function is when you hover off the image it fades back to 0.5 which is 50% simple as that. As long as you play around on what I colored in BLUE, you should be safe and won’t mess up the script.
Another thing I have to add is 0.1 = 1%, 0.5 = 50%, 1.0 = 100%
And as always don’t forget to click that save button ^_^ and also show us your cool fade-in fade-out effect you made after reading this quick tutorial. We would like to see on how you did. Just leave us your URL to your website on the comments box! Have a good day!
2 Responses to Single Image Opacity Fade In and Out Effect Using jQuery
Jo
Replied on: February 21, 2012, 7:21 pm
Hi, Thank you so much for the post, this is one of the only one of these effects that works in IE. I have a question, I want to add a second effect like this but with different opacity settings i.e. my first one on my page is 0.7 to 1 opacity, now I want to add another image but with 0.3 to 0.8 opacity, I just created a second JavaScript and a second class and it works in Chrome but not IE – any advice? Thanks again! Will share when it’s finished
Chriss
Replied on: February 22, 2012, 5:37 pm
I believe if you use a different “class” to that div it should work. Can you link me the project you have? Thanks!