We would like to know how to enlarge grid cell in animation.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul, li {<!--from w w w.jav a 2s . c om-->
list-style: none;
padding: 0;
margin: 0;
}
ul {
width: 400px;
}
li, .item {
width: 100px;
height: 100px;
}
li {
float: left;
margin: 5px;
position: relative;
}
.item {
background-color: #eee;
border: 1px solid #ccc;
position: absolute;
z-index: 1;
-webkit-transition: all 0.1s ease-in-out;
}
.item:hover {
width: 110px;
height: 200px;
z-index: 2;
-webkit-transform: translate(-5px, -5px);
-webkit-box-shadow: 1px 1px 1px #888;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
</ul>
</body>
</html>
The code above is rendered as follows: