Animation How to - Enlarge image with animation and transition using target attribute

Question

We would like to know how to enlarge image with animation and transition using target attribute.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#myGallary {<!-- ww  w. j a  v  a  2 s  . c  om-->
  display: table;
  border-spacing: 10px;
}

#myGallary a {
  display: table-cell;
  vertical-align: middle;
}

#myGallary img {
  -webkit-transition: 1s;
  -moz-transition: 1s; -0
  -transition: 1s;
  transition: 1s;
}

#myGallary img:target {
  width: 300px;
  height: 150px;
}

#myGallary img {
  background-color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 0 7px rgba(100, 100, 100, 0.8);
}
</style>
</head>
<body>
  <div id="myGallary">
      Click image to enlarge.<br/>
    <a href="#b1"><img src="http://www.java2s.com/style/download.png" id="b1"
      width="100" height="50" /></a> 
    <a href="#b2"><img src="http://www.java2s.com/style/download.png" id="b2" width="100" height="50" /></a>
    <a href="#b3"><img src="http://www.java2s.com/style/download.png" id="b3" width="100" height="50" /></a>
  </div>
</body>
</html>

The code above is rendered as follows: