Web codes and news about web technology: Hovering part of image using CSS and HTML5

On the web you will find a lot of examples of hovering image. Everybody knows how to do it but hovering part of image is a little bit harder, and there is no so much examples. So i made this post to help designer in hovering part of image with only css and html.

Here is the code:



  
  Some buildings
  
  
  

  
  
  

  
  Nice view from here
  
  
  

  
  Nice view from here
  
  
  

  
  Nice view from here
  
  
  

  
  Nice view from here(if you click you will go to another site)
  
  
  

  
  

  
  Nice yachts

Style:

<style>
ul#place {
  list-style: none;
  background: url(nizza-hafen500x310-bw.jpg) no-repeat 0 0;
  position: relative;
  width: 500px;
  height: 310px;
  margin: 10px;
  padding:80px;
 }
 
ul#place li {
  
  position: absolute;
 }
 
ul#place li a{
  display: block;
  height: 100%;
  text-decoration: none;
 }
 
 #one {
  width: 100px;
  height: 155px;
  top: 0px;
  left: 0px;
 }
  
 #two {
  width: 100px;
  height: 155px;
  top: 0px;
  left: 100px;
 }
  
 #three {
  width: 100px;
  height: 155px;
  top: 0px;
  left: 200px;
 }
  
 #four {
  width: 100px;
  height: 155px;
  top: 0px;
  left: 300px;
 }
  
 #five {
  width: 100px;
  height: 155px;
  top: 0px;
  left: 400px;
 }
  
 #six {
  width: 100px;
  height: 155px;
  top: 155px;
  left: 0px;
 }
 
 #seven {
  width: 100px;
  height: 155px;
  top: 155px;
  left: 100px;
 }
 
 #eight {
  width: 100px;
  height: 155px;
  top: 155px;
  left: 200px;
 }
 
 #nine {
  width: 100px;
  height: 155px;
  top: 155px;
  left: 300px;
 }
 
 #ten {
  width: 100px;
  height: 155px;
  top: 155px;
  left: 400px;
 }
 
 ul#place li a:hover {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QiaHxI-CMgnhoY8uPdRqyAwcdyEtgbK3sUuZE9WlCUNTibIRFuTrzW0Q3Kc3CztBePDuPGejyyMG5bVU_EZPHkg8AeTdmcs6AUkB14xkmywyZ8cONEJT-EXcCAgBORYzyznr73V2mFA/s1600/nizza-hafen500x310.jpg) repeat 0 0;
 }
  
 ul#place li#one a:hover {
  background-position: 0px 0px;
 }
 ul#place li#two a:hover {
  background-position: 400px 0px;
 }
  
 ul#place li#three a:hover {
  background-position: 300px 0px;
 }
  
 ul#place li#four a:hover {
  background-position: 200px 0px;
 }
  
 ul#place li#five a:hover {
  background-position: 100px 0px;
 }
  
 ul#place li#six a:hover {
  background-position: 0px 155px;
 }
 
 ul#place li#seven a:hover {
  background-position: 400px 155px;
 }
 
 ul#place li#eight a:hover {
  background-position: 300px 155px;
 }
 
 ul#place li#nine a:hover {
  background-position: 200px 155px;
 }
 
 ul#place li#ten a:hover {
  background-position: 100px 155px;
 }
 
 ul#place li a span {
  display: none;
 }
 
 ul#place li a:hover span {
  display: block;
  padding: 5px;
  width: 150px;
  background: #000;
  position: relative;
  top: 50%;
  font: 11px Arial, Helvetica, sans-serif;
  opacity: .75;
  filter:alpha(opacity=75);
  color: #FFF;
 }
</style>