CSS mouse hover change image size and position problem

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

[Author]

Posts