Categories
Website Design

Change Image Opacity On Mouseover Using jQuery

Change Image Opacity On Mouseover Using jQuery

In this post we will discuss how to Change Image Opacity On Mouseover Using jQuery. Opacity is term which is used to define opacity level for an element. Opacity level describes the transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Here we are trying it with jQuery, with the help of jQuery we are able to accomplish this.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Image Opacity On Mouseover jQuery</title>
<style type="text/css">
body {
width: 980px;
margin: 0px auto;
text-align: center;
padding-top: 50px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$(function() {
$("#image").css("opacity", 0.5);
$("#image").hover(function() {
$(this).animate({ opacity: 1.0 }, 500);
}, function() {
$(this).animate({ opacity: 0.5 }, 500);
});
})
</script>

</head>
<body>
<form id="form1">
<div>
<h1>Change Image Opacity On Mouseover jQuery</h1>
<img id="image" src="http://hightechnology.in/wp-content/uploads/2012/09/hightechnology-logo-small.png" />
</div>
</form>
</body>
</html>