How to animate an element on hover - html

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.