How to animate an element on hover

Question

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.

Answer 1

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/

Answer 2

I did something like this for a similar problem (you can change the scale to whatever works for you):

div:hover {
 -webkit-transform: scale(1.1);
 -moz-transform:    scale(1.1);
 -o-transform:      scale(1.1);
 -ms-transform:     scale(1.1);
}

Note that this will scale both the div and its content, which I think is what you want.

Answer 3

Using CSS you can add a hover style to the div:

div.container {
    width: 80%;
    background-color: blue;
}

div.container:hover {
    width: 100%;
    background-color: red;
}

See this jsFiddle for a demonstration.

jQuery Solution

Another option that might work for you is jQuery. It's a JavaScript library that simplifies commonly needed functionality such as this. Using jQuery, you can easily add hover effects to the elements:

//hover effect applies to any elements using the 'container' class
$(".container").hover(
    function(){ //mouse over
        $(this).width($(this).width() + 30);
    },
    function(){ //mouse out
        $(this).width($(this).width() - 30);
    }
);

See this jsFiddle for a demonstration.