CODEWITHSUNDEEP
htmlcss
user2456783
user2456783

Reputation: 100

Image resize from center with top left tags

Alright, here is the problem.

I have an image within a div, and this is the CSS for it:

top: 420px; 
left: 517px;
position: absolute;
padding-top: 25px;
 height: 60px;
  width: 60px;

-webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
    transition: all 0.4s ease;

I then have a :hover CSS for it, to resize it (to make a enlarge effect)

top: 415px;
left: 512px;
height: 75px;
width: 75px;

This works OK, but my question is:

How do I know how to set the top and left property to make the image enlarge from the center? I just tested a few numbers and found that if I decrease the top and left property by 5px it does the effect (from center). But how to know which value is perfect for it? If I have a larger image, the top and left property will be different. Is there any way to calculate these numbers? Even if the logo looks like it is zooming from center I still doubt its perfectly centered if I watch it long enough.

Hope you understood my problem.

Kind Regards, Mike

Upvotes: 0

Views: 195

Answers (2)

zsaat14
zsaat14

Reputation: 1118

Let's do a little math. Your image is growing from 60px to 75px in both directions. That is 15px in both directions. If we divide this by 2, we get the amount each side is growing by: 7.5px. this is what you need to decrement your top and left properties by.

The formula looks like this: (newSize-originalSize)/2

This is done for both directions.

Here is a fiddle that demonstrates this value. This fiddle has two images (so the hover is finicky) to show that the image grows from the center. It is slightly off, but that is because CSS rounds decimal px measurements. Without the reference image, the growing one looks to grow from the center. In the end, no one but you will know.

Final CSS:

img {
    top: 120px; 
    left: 117px;
    position: absolute;
    padding-top: 25px;
    height: 60px;
    width: 60px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
img:hover{
    top: 112.5px;
    left: 109.5px;
    height: 75px;
    width: 75px;
}

Upvotes: 1

stoneage
stoneage

Reputation: 510

If I understood the question right, you want to evenly enlarge from the center of the image when you hover. The math there is fairly straight forward. You want the image to expand at the top and bottom the same amount an left and right the same amount.

If the old image has height = h, width = w, top = t, left = l. And you enlarge to height = h', width = w', we can calculate the new top (t') and left (l') with the formulas:

t' = t - ((h' - h) / 2)
l' = l - ((w' - w) / 2)

To explain what's going on, think about the height. Basically we are taking the difference in the new height and the old height and we want the picture to move half that value in both the top and bottom. So we can divide by 2 and subtract that number from the old top to move it accordingly.

Upvotes: 1

Related Questions