Animation How to - Expand Triangle to Square on Hover with Animation

Question

We would like to know how to expand Triangle to Square on Hover with Animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#img-1 {<!--from  ww w  . j a  v  a  2s .  co m-->
  shape-inside: polygon(0 0, 75px 75px, 150px 150px, 0 150px);
  transition: all 2s ease;
  -webkit-clip-path: polygon(0 0, 75px 75px, 150px 150px, 0 150px);
}

#img-1:hover {
  shape-inside: polygon(0 0, 150px 0, 150px 150px, 0 150px);
  -webkit-clip-path: polygon(0 0, 150px 0, 150px 150px, 0 150px);
}
</style>
</head>
<body>
  <a href="" class="svg-link"> <img id="img-1"
    src="http://www.java2s.com/style/download.png"
    width="150px" height="150px" />
  </a>
</body>
</html>

The code above is rendered as follows: