Search code examples
cssjquery-animatejqueryjquery-effects

Reduce image size using jquery?

I need to reduce the image size using jquery(not the div size) , when I entered the mouse into the div which contains an image.

My div will be,

<div class="toolbarIcon" >
    <img width="40px" height="40px" src="toolbar/user_login.png"/><label class="toolbarLabel">Login</label>
</div>

CSS will be,

.toolbarIcon {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #E6E6E6;

    width: 60px;
    float: left;
}

Also jquery will be,

$(document).ready(function(){

    $("#toolbar").corner("5px");
    $(".toolbarIcon").corner();

    $(".toolbarIcon").mouseover(function(){
        $(this).css("background-color","#FFCC80");
    });
    $(".toolbarIcon").mouseout(function(){
        $(this).css("background-color","#EBEBFF");
    });


    $(".toolbarIcon").mouseup(function(){
        $(this).css("background-color","#FFCC80");
    });
    $(".toolbarIcon").mousedown(function(){
        $(this).css("background-color","#E6B85C");

    });

});

The design from,

enter image description here

To ,

enter image description here

Note : The size of the image was changed.How can I achieve this using Jquery , When I entered the mouse ion the div.

Good answers are definitely appreciated.

Solution

  • You can just set the size of the image and the browser will scale it for you and I would recommend using the .hover() event which covers both mouse over and mouse leave:

    $(".toolbarIcon").hover(function(){
    $(this).css("background-color","#FFCC80");
    $(this).find("img").css({height: "30px", width: "30px"});
}, function() {
    $(this).css("background-color","#EBEBFF");
    $(this).find("img").css({height: "40px", width: "40px"})
});

    You could also use just CSS for this too:

    .toolbarIcon:hover img {
     width: 30px;
     height: 30px;
}

    Depending upon the exact effect you want, you may also want to tweak the padding below the image to keep it vertically centered when you hover.