jump to navigation

Change Image Opacity on MouseOver using jQuery December 27, 2011

Posted by Tournas Dimitrios in JQuery.

This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image . Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability . In this example , the images has a class attribute ‘imgOpa’. When the image is loaded , it’s set  into a semitransparent state . In Firefox , Chrome and Safar i, we use the opacity:n property for transparency . The opacity value can be from 0.0 – 1.0 , where a lower value makes the element more transparent . In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100 .

When the user hovers the mouse over a semitransparent image , we use the jQuery hover() method to animate the opacity property from 0.3 to 1.0 , thereby creating a cool effect on the images .

    <style type="text/css">
<script type="text/javascript"

<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
function() {
$(this).stop().animate({ opacity: 1.0 }, 800);
function() {
$(this).stop().animate({ opacity: 0.3 }, 800);

<h2>Hover over an Image to change its Transparency level</h2>

<img class="imgOpa" src="image1.gif" alt="Smiley face"  />  


I hope you found this article useful .


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s