We would like to know how to expand Triangle to Square on Hover with Animation.
<!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: