CSS resize transition

This simple CSS example shows how to create a resize effect occurring on mouse over. It should work on all browsers, except for IE < 10.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<style>

.demo {

width: 100px;

height: 100px;

transition-duration: 1s;

transition: height 1s;

-moz-transition: height 1s;

-webkit-transition: height 1s;

-o-transition: height 1s;

background: #06C;

color: white;

text-align: center;

}

.demo:hover {

height: 200px;

color: #F00;

} 

</style>

<div class="demo">Please move the mouse over here</div>

Newsletter

Sign up for inspiration, news and updates