How can I modify the position of the animation effect?

[javzam]

Hi,

I am trying to implement Moving Boxes in a website. Everything works fine but I'd like to change the animation.

I was wondering if it's possible to make the panel zoom in keeping the edge. I mean, I'd like the picture to grow but to keep the same position. I've tried with CSS but it grows down and then goes up. It would be great if I can decide where is the final position of the picture.

I hope you will understand me, I know my English needs to improve.

Thank you all of you in advance.

[javzam]

I try to explain myself better with this rudimentary example:

Not this:

• - _ - -

But this:

• - - - - (at the same height)

I don’t know if it is possible or not but if it is, I don’t know how to do it. I would appreciate any help. Once more, sorry to bother and thank you very much.

[Mottie]

Hi Meits!

Sorry I didn't respond earlier... I've been sick =(

Have you tried giving the image a position:relative and setting the size using pixels? The panels are set up so that every thing inside the panel is set using percentages (%) and em. So if you set the size using pixels, the element/image won't change.

[javzam]

I think I didn't explain myself correctly. I want the image to grow, to change its size. The thing I want to change is the position where the image is placed after growing. If I change it using CSS the animation is still the same and then it changes its position without any transition.

What I want is to modify the transition effect by changing the fingal position of the image without using CSS but the moving boxes function

I mean:

. - - () - - (that's what I want, the image is bigger but the centre is at the same y-height)

[Mottie]

How much of a change? Maybe using a margin % or top/left % value might work? It's difficult to see what you are trying to accomplish without a demo to look at... maybe modify this demo to give me a better idea?

[javzam]

Sorry again, I should have done it before.

http://www.meits.es/pruebaslider/chriscoyier-MovingBoxes-6dbbfab/index.html#&slider1=2&slider2=3

You will see there is a movement after the effect that is provoked by the CSS rule. I want to do what you see but without the 'jump'. Is it possible? I don't mind if it has to grow down and then move or just grow and take the final position.

[Mottie]

Ahhh, I see now... the problem is that the "current" class is added to the current image AFTER the animation has completed. So from looking at the css, I see that the current class has a negative top margin... just remove that and it should stop jumping.

#slider-two .current img {
  /* margin-top:-50px; */
  /* height: 326px; */
}
#slider-one .current img {
  /* margin-top:-50px; */
  /* height: 326px; */
}

[javzam]

I know that Mottie, I've added these margin-top to show you the position where I want the image after the growing. The point is that I don't want the jump but I want the image in this position.

I really appreciate your help,

Thank you Mottie

[Mottie]

Oh, ok I understand now... I tried using a negative margin, but there is just too much of a gap. I think the best solution would be to remove all of the white space above the item in the image, so when the image resizes, the item stays at the top of the image. Does that make sense?

[javzam]

Yes, that make sense, but how could I remove this white space? I can't figure out how to do it

[Mottie]

Use an Image editor to crop the images... If you don't have photoshop, then try irfanView or something like it.

[javzam]

Hi Mottie,

I see your point, but by cropping the images what I get is the same top position for all the bikinis. Instead of that, what I want is the top position of the .current img like 30px above the thumbnails of the other bikinis.

That's why I insist in how to change the effect and not the image. Besides, I couldn't keep the mouseover effect since the border would be almost over the image

If it is not possible, would be possible to align all the images by the bottom position instead of the top position?

Thanks Mottie for your help

[Mottie]

Ok, based on this article, I added some "creative" css... remove the negaitve top margin css and add this:

.mb-panel { display: table; height: 100%; }
.mb-inside { display: table-cell; vertical-align: middle; }
.mb-inside img { width: 100%; }

[javzam]

Thank you very much! It works great!!!

Your help has been priceless!

[Mottie]

Glad to help :)