Grow your CSS skills. Land your dream job.

CSS mouse hover change image size and position problem

  • # February 19, 2013 at 10:31 pm

    Hello guys,

    I’m trying to do a menu for my page and so far I’ve got this…

    http://jsfiddle.net/tNLUx/

    Well the problem is I want to make the down images grow and move to down so it doesn’t overcome the others and maintain the organisation of the menu . Is that possible?

    Sorry my awful english

    Thanks for the attention
    Cheers

    # February 19, 2013 at 10:42 pm

    you’ve mixed up ids and classes – ids are unique while classes can be used on multiple elements

    http://jsfiddle.net/Da6Mp/

    # February 19, 2013 at 10:43 pm

    Hey @iniestar,

    > Well the problem is I want to make the down images grow and move to down so it doesn’t overcome the others and maintain the organisation of the menu .

    I’m a little confused about that, not sure what you’re looking for them to do.

    My first thought was if you want them to expand so it doesn’t effect anything else, try `transform: scale`

    Here’s a fork http://jsfiddle.net/wHjgA/1/

    # February 20, 2013 at 10:30 am

    First of all, thank you guys for the help

    @wolfcry911, you’re right about the ID and Class, i’ll keep that in mind ;)
    You kind of solved the problem whit the images below but that messed up whit the upper images.

    @ChrisP, transform:scale worked well, although it doesn’t affect the other images position… but I can live without that.
    There is any way to control the others position?

    cheers

    # February 20, 2013 at 10:34 am

    >There is any way to control the others position?

    Of course. it just depend on what you want them to do. The real issue is that using absolute positioning (which I agree you pretty much have to in this instance) it adds extra complication.

    Maintainability and extendibility might be problematical.

    # February 20, 2013 at 10:59 am

    I just want to make the others images to move on mouseover so none of them it’s covered by the scaled image

    # February 22, 2013 at 6:33 pm

    @Paulie_D you were right.. maintainability is crazy whit the absolute positioning. I think I’ll keep with the scale effect for now

    thanks everyone ;)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".