当 div 悬停时扩展图像或背景

Question

I need a div background image to expand when the div is hovered. What would the best way to do this be?

It needs to be a smooth animation. Ideally I would like to use JQuery but I am very new to coding so is there a ready made code I could use?

I Have just created this code and IT WORKS A TREAT! I hope it helps

<img class="wooll" src="/images1" style="position: absolute; margin: 0 0 0 20px;" />

<img  style="" src="/images2" class="grow"/>


$(".wooll, .grow").hover(function() {
   $('.grow').animate({
        'height': $(this).height() * 1.4,
        'width': $(this).width() * 1.4
    });
}, function() {
    $('wool, .grow').animate({
        'height': $(this).height() / 1,
        'width': $(this).width() / 1
    });
});​

Answer 1

Here is a very basic example of the syntax and a working example .

$("#mydiv").mouseover(function(){
    $("#mydiv").animate({width: '200', height: '200'},200);
});

I would highly recommend reading about the animate function in the JQuery API and exploring the features of the framework.

Answer 2

Very simple way of doing it! You can use CSS3 for the smooth transition, just apply this to the background in css:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

Then for the hover

div:hover .background {
background-size: cover /* or you can use width/height */
}

Working example on JSFiddle: http://jsfiddle.net/AVyQc/3/

Answer 3

With CSS3 , you can add an effect when changing from one style to another, without using Flash animations or JavaScripts and with use of only pure css .

see the demo :- DEMO1

see the demo :- DEMO2

I hope this will help you

HTML

<div>
</div>

CSS

div {
width:100px;
height:100px;
background:red;
}
div:hover {
width:200px;
height:200px;
background:yellow;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}