Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Some help with CSS animation – shifting elements.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #34218
    tannercampbell
    Participant

    If there were 10 levels of CSS mastery, I’m only about a 4 or 5 so pardon if this question has a simple answer. Also, when it comes to INTERACTIVE CSS that includes Javascript … I’m a 1 … this is quite literally my first attempt at it.

    I’m working on a site for my job: http://how-do-i-find-peace.com/sole

    Animation is working exactly as I’d like it to, however the elements at the bottom are being pushed. I understand why it’s happening, so I attempted to float the elements below, so they wouldn’t be affected, didn’t work. Then I tried to absolute positioning … that didn’t work either. I’m sure there’s a way to allow the menu items to be dynamic while keeping the bottom elements in a fixed position.

    Any help would be appreciated – thanks :)

    T.

    #86440
    Johann
    Member

    1. use relative positioning for the images, and find how you need to tweak the hovered position so it stays centered. also play around with (negative) margins to influence the position as well as how far the other images get pushed! and if you don’t want them to get pushed at all, use absolute positioning instead (relative to their individual wrappers so you don’t have to tweak all four to different values)… hope that helped :)

    #86448

    In regards to the first query, I would recommend using the CSS property transform: scale(1);.

    Second issue: declare the height and width of the image using CSS.

    Also, have the images at 100% zoom on hover so there is no distortion.

    Here is a fiddle to illustrate: http://jsfiddle.net/sl1dr/98ePh/

    #86449

    @wolfcry911 Good call regarding deprecation, not sure what I was thinking there. If you refer to the OP (‘On the page load you see the images sort of move into position’) you will see that declaring the height and width using CSS is required to stop the movement when the images load.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.