Video tutorial: Image opacity effect with CSS and JavaScript events

In this post I will go over creating nice image opacity effect using CSS alpha filter and Java Script events.

This effect is a nice one. The problem with it is that different browsers understands it in different ways, that is why I will introduce different syntaxes for different browsers and explain how to make sure that the syntax will be used according to the users browser.

Here is the code I used in this lesson:

HTML:

<strong>Style: alpha</strong><br />
<img src=”me.jpg” /><br />
<strong>Style: alpha_gradient_style1</strong><br />
<img src=”me.jpg” /><br />
<strong>Style: alpha_gradient_style2</strong><br />
<img src=”me.jpg” /><br />
<strong>Style: alpha_gradient_style3</strong><br />
<img src=”me.jpg” /><br />

<strong>Mose over effect</strong><br />

<img src=”me.jpg” style=”opacity:0.5;filter:alpha(opacity=50)”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.5;this.filters.alpha.opacity=50″ />

CSS:

.alpha {
filter: alpha(opacity=50)
-moz-opacity: 0.50;
opacity:0.5;
}

.alpha1_gradient_style1 {
filter: alpha(opacity=100, finishopacity=0, style=1, startx=100, starty=100, finishx=0, finishy=0)
}

.alpha1_gradient_style2 {
filter: alpha(opacity=100, finishopacity=0, style=2, startx=100, starty=100, finishx=0, finishy=0)
}

.alpha1_gradient_style3 {
filter: alpha(opacity=100, finishopacity=0, style=3, startx=100, starty=100, finishx=50, finishy=0)
}

Hope this tutorial was useful for you.

If you really liked it you are welcome to rate it on Youtube, that will really help.

I will be happy to hear your comments here or any question by email.

You are welcome to subscribe to my mailing list, RSS feed or Youtube channel to get updates whenever I upload any new posts.

Related Posts

1. How to CSS video tutorial: Simple image frame border effect with css
2. Video tutorials: How to create image watermark effect in CSS – protect your images
3. Video tutorial: How to create CSS button rollover effect menu web design tutorial
4. CSS video tutorial: How to create rounded corners box simple effect with photoshop and css
5. JavaScript tutorial validate form: Textboxes, select , check box – components and EMAIL validation

(5 votes, average: 3.80 out of 5)

 Loading ...