In
this article I am going to explain how to applying hover effect to image/images
using jquery and css.
Description:
In
the previous article I have explained Generate unique OTP in asp.net using C#,vb.net and How to find (get) the Last day of Previous, Current and Next monthin Sql server.
To
apply image hover effect using Jquery and CSS. On mouse hover its fades the
image/images.
Implementation:
Add
the below given style to stylesheet or add it before closing </head> tag.
<style>
table img {
width:250px;
}
span.roll {
background:url(images/mag.png) center center no-repeat #000;
height: 141px;
position: absolute;
width: 250px;
z-index: 10;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
span.rollover {
opacity: 1;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
background:url(images/mag.png) center center no-repeat #000;
cursor: pointer;
height: 141px;
width: 250px;
position: absolute;
z-index: 10;
opacity: 0;
}
span.rollover:hover {
opacity: .7;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
</style>
Add
the Jquery between head tag of page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
<script>
$(function () {
$(".roll").css("opacity", "0");
$(".roll").hover(function () {
$(this).stop().animate({
opacity: .7
}, "slow");
},
function
() {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
</script>
Complete HTML
markup of webpage
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
table img {
width:250px;
}
span.roll {
background:url(images/mag.png) center center no-repeat #000;
height: 141px;
position: absolute;
width: 250px;
z-index: 10;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
span.rollover {
opacity: 1;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
background:url(images/mag.png) center center no-repeat #000;
cursor: pointer;
height: 141px;
width: 250px;
position: absolute;
z-index: 10;
opacity: 0;
}
span.rollover:hover {
opacity: .7;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
</style>
<script>
$(function () {
$(".roll").css("opacity", "0");
$(".roll").hover(function () {
$(this).stop().animate({
opacity: .7
}, "slow");
},
function
() {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><span class="roll" ></span><img src="images/img.jpg" /></td>
<td></td>
<td><span class="roll" ></span><img src="images/img1.jpg" /></td>
<td></td>
<td><span class="roll" ></span><img src="images/img2.jpg" /></td>
<td></td>
<td><span class="roll" ></span><img src="images/img3.jpg" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Demo:
In this article we have learn how to add image hover effect using Jquery and CSS in asp.net . I hope you enjoyed this article.
No comments:
Post a Comment