CODEWITHSUNDEEP
jqueryhtmlcssscale
fdassaf
fdassaf

Reputation: 59

Scale image from the middle using jQuery

Is it possible to make a image scale from the middle with jQuery? Right now it's going from top left.

$( document ).ready(function() {
    $("#logo").animate({
        height: '+=100%',
        width: '+=100%'
    });

});
#logoblock
{
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}
#logo
{
    position: absolute;
    width: 0%;
    height: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

Is this possible?

Upvotes: 2

Views: 58

Answers (2)

maioman
maioman

Reputation: 18754

You could start out with transform scale(0);

adding a class that takes care about transform:scale(1) you can also transition (jquery animate() has some problems with transform properties )

fiddle

Upvotes: 0

Nafees Anwar
Nafees Anwar

Reputation: 6598

may b exactly not what you want

$( document ).ready(function() {
$("#logo").animate({
    height: '+=100%',
    width: '+=100%',
    top: 0,
    left:0
});

});

css

#logoblock
{
position: relative;
width: 700px;
height: 700px;
margin: auto;
}
#logo
{
position: absolute;
top:50%;
left:50%;
width: 0%;
height: 0%;
}

fiddle http://jsfiddle.net/73h17m1t/

click run button after fiddle loaded and resize result frame to full size for best view.

Upvotes: 1

Related Questions