Forums

iniestar

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

wolfcry911

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

http://jsfiddle.net/Da6Mp/

ChrisP

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/

iniestar

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

Paulie_D

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.

iniestar

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

iniestar

@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 ;)

treehouse : what would you like to learn today?

Forums

[Solved] CSS mouse hover change image size and position problem