aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Change Opacity of Image on Mouseover

May 21, 2014

Here I will explain how to use
jQuery to change image opacity on mouseover using jQuery or change opacity of image on hover using jQuery.

In previous articles I explained jQuery change image on mouseover,
jQuery dropdown with images, jQuery show alert message while leaving from website, jQuery Countdown timer script example and many articles relating to jQuery and Now I will how to change image opacity on mouseover using jQuery.

To change image opacity on mouseover we need to write the code like as shown below

<html xmlns="">
<title>jQuery Change Image Opacity on Mouse Over</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function() {
$("#logoimage").css("opacity", 0.5);
$("#logoimage").hover(function() {
$(this).animate({ opacity: 1.0 }, 500);
}, function() {
$(this).animate({ opacity: 0.5 }, 500);
<form id="form1">
<img id="logoimage" src="" />
Live Demo

To check live demo try to hover on image

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

Good Article, but now its more easy do this animations with the css3 transitions.

Bheesham kumar Sharma said...

But how to change color image into b/w?

Anonymous said...

vry vry nice.but how to hide the url address bar.i mean in iwant only when isaw aboutus page in website.pls sens to my mail in html are jaascript .my mail

Anonymous said...

Good article

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.