How to animate an element on hover

css, css-transitions, html

Solution

CSS3 solution:

div {
    background: #999;
    width: 200px;
    height: 20px; 
    transition: width 1s;
}

div:hover{
    width: 300px;
}

<div>
    <p>Im content</p>
</div>

http://jsfiddle.net/MrdvW/

Problem

How can I make my `<div>` elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried: ``` size: 150%; ``` and ``` height: +30px; width: +30px; ``` the first try didn't work at all, and the second code just made the div's flash and dissappear partially.

Original source