change image size(width) by jquery or css

Question

how can changed image size in mouse

example

from

to

Answer 1

This is one way to do it using HTML/CSS/JQuery:

See this code in action via jsfiddle here .

THE HTML

<div id="image_frame">
    <div class="shrinking_image"></div>
</div>

THE JQUERY

$(document).ready(function(){
    $("#image_frame").hover(
        function(){
            $(this).find(".shrinking_image").addClass("image_frame_hover");
        }, 
        function(){
             $(this).find(".shrinking_image").removeClass("image_frame_hover");
        });
});

THE CSS

#image_frame {
   width:167px; height:27px; 
}

.shrinking_image {
    background-image:url(http://i.stack.imgur.com/q9MCk.jpg);
    background-repeat: no-repeat;
    background-position:0px 0px;
    overflow:hidden;
    width:167px; height:27px;
}

.image_frame_hover {
    overflow:hidden;
    background-position:-70px 0px !important;
    width: 24px !important;
}

See this code in action via jsfiddle here .

Basically, you are just using jQuery's hover() function to assign and un-assign a special css that uses the a combination of the css properties width , height and background-position to show only the parts of the photo you care about.

Hope this helps!