CODEWITHSUNDEEP
javascriptjqueryimagecss
ashkufaraz
ashkufaraz

Reputation: 5297

change image size(width) by jquery or css

how can changed image size in mouse

example

from

enter image description here

to

enter image description here

Upvotes: 0

Views: 95

Answers (1)

radiovisual
radiovisual

Reputation: 6458

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(https://i.sstatic.net/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!

Upvotes: 1

Related Questions