Wednesday, 9 January 2013

Hover Change the image

This is make simple tricks about css concept based on multiple image choose on css just positions will be changed the image location most of the website designers use this method all small images to combine single image and use image positions. just try this below css code also have live demos.  

1.save the photo 

2.copy the coding and edit the photo locations 

ex:  background:url(pa.jpg) bottom;

3.Run the Page

Live Demo     View code  



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>photo</title>
<style>
.myButtonLink {
    display: block;
    width: 500px;
    height:311px;
    background:url(pa.jpg) bottom;
    text-indent: -99999px;
}
.myButtonLink:hover {
    background-position: 0 0;
}
 
</style>
</head>
 
<body>
<h2>On Click Photo Change the functions </h2>
<a class="myButtonLink" href="#LinkURL">Leaf</a>
 
</body>
</html>



DEMO

Leaf

2 comments:

  1. Onclick Change the Photo super

    ReplyDelete
  2. nice concept.. well done.. post more. we are eager learn more from you..

    ReplyDelete