How To Animate An Element On Hover

How can I make my

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;

Solution 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/

Solution 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.

Solution 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.

Share