Demo
Hover to Change the Image
This is Change image position to hover the image.CSS simple coding for hover a image to changing position image .simple CSS using to change a position.
CSS:
#myButtonLink {
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}
HTML:
<a id="myButtonLink"></a>
Source Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover to Change the Image</title>
<style>
#myButtonLink {
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}
</style>
</head>
<body>
<h2 align="center">Hover to Change the Photo </h2>
<a id="myButtonLink"></a>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover to Change the Image</title>
<style>
#myButtonLink {
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}
</style>
</head>
<body>
<h2 align="center">Hover to Change the Photo </h2>
<a id="myButtonLink"></a>
</body>
</html>
No comments:
Post a Comment