No replies
csatterwhite's picture
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2013-04-23
Posts: 1
Points: 2

Can someone please explain to me how to do what I have illustrated below?

Say I have 10 images that I would like to treat as a menu, tiny images, on rollover, the image gets larger, has padding and a border, thus expanding. Problem is, the rollover moves the element to the right of the rollover, I would like for the elements to stay positioned, and the image expand from the center, instead of top left, and z-index over other images.

Tried this:

.mini-slide-holder img { width:28px; height:36px; background:#fdfdfd; cursor: pointer; position: relative center;  z-index: 1;  }
.mini-slide-holder img.first { }
.mini-slide-holder img:hover { width:37px; height:48px; padding:2px; border:1px solid #d5d5d5; position: relative; z-index: 2; }

Didn't work. Possible with only css?

Any help is appreciated.