CODEWITHSUNDEEP
javascriptjqueryimage
Vish
Vish

Reputation: 4492

Jquery onmouseover image size increase

I am trying to do an effect where when the mouse hovers over an image the it grows large by 50% of its size and goes back as soon as the mouse moves out of its region. Can it be possible to do this with jquery? how? could it be possible to do this without jquery? how hard would it be to do it without jquery?

Upvotes: 2

Views: 21904

Answers (4)

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

It is a easy task in both the ways. I have fiddles for you with an example in both the ways:

  1. Jquery: http://jsfiddle.net/G7yTU/

    $(document).ready(function(){      
var ht= $("img").height(),      
wd=$("img").width(),      
mult=1.5; //change to the no. of times you want to increase your image 
      //size.
$("img").on('mouseenter', function(){
$(this).animate({height: ht*mult,
                 width: wd*mult}, 500);
});
$("img").on('mouseleave', function(){
$(this).animate({height: ht,
                 width: wd}, 500);
})
});

  2. CSS: http://jsfiddle.net/zahAB/1/

    img{
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
   }

img:hover{
    width:150px;
    height:150px;
}

If you need any help, please contact.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185963

Here you go:

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

Live demo: http://jsfiddle.net/simevidas/fwUMx/5/

Upvotes: 16

JoshRivers
JoshRivers

Reputation: 10290

You can do this by using pure CSS. Here is a running sample.

Given this HTML:

<img class="foo" src="/img/logo.png">

Add this CSS:

body { background-color: black }
.foo {
    height:25px;
}
.foo:hover {
    height:50px;
}

Use jQuery if one of your target browser doesn't support decent CSS, but I tested in IE8, and it supports this.

Upvotes: 4

dianovich
dianovich

Reputation: 2287

It is possible to do this with jQuery, which is a JavaScript library, et alors: you can also use plain JavaScript.

jQuery:

var $image = $('#imageID'), //Or some other selector
    imgWidth = $image.width(),
    imgHeight = $image.height();
$('#imageID').hover(function() {
  //The mouseover 
  $(this).width( imgWidth * 2);
  $(this).height( imgHeight * 2);      
}, function() {
  $(this).width( imgWidth );
  $(this).height( imgHeight );
});

Plain JavaScript:
See Example here: http://jsfiddle.net/axpVw/ 

var image = document.getElementById('imageID'),
    imageWidth = image.width,
    imageHeight = image.height;
image.onmouseover = function() {
  image.width = 2 * imageWidth;
  image.height = 2 * imageHeight;
}
image.onmouseout = function() {
  image.width = imageWidth;
  image.height = imageHeight;
}

Upvotes: 2

Related Questions