0

Im having trouble getting a transition for the height / width of images to appear correctly. I dont think much explanation is necessary if you look at my page:

Image Transition Link

Essentially I am trying to get the image to enlarge for a better viewing by doubling its size. However, because I have it in a 960 grid layout it doesnt come out to appear properly.

Try this: click on the Chip Kidd and the David Carson images and you will see.

Chip Kidd is not too bad when you hover over it but when it enlarges it appears behind David Carson image instead of over the top.

David carson seems alright because there are no images to the right of it. However, instead of growing left it grows right and outside the 960 grid.

What fix could I used to get the enlarging of the images to appear aesthetically pleasing (ie they dont end up hiding behind other images, and perhaps they stay within the size of the 12 grid container rather than going outside that margin like the David Carson image does?)

4

1 回答 1

1

Try using a css transform (scale) instead of just changing the width and height.

Edit: Try changing your hover rule to this (you'll have to add the browser prefixes).

.zinepages img:hover {
    position: relative;
    z-index: 100;
    -webkit-transform: scale(2);
    transition: all 2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

I added a relative position and z-index to ensure it always sits above other things. I also added a box-shadow for a nicer effect, up to you if you want to keep it or not.

Edit 2: I also just noticed you don't want it to overflow the grid. You can do that with transform-origin. You'll have to give classes to the left aligned and right-aligned images, and set transform-origin: left top; or transform-origin: right-top; respectively. Again, I've left off vendor prefixes here.

于 2013-06-02T02:49:10.727 回答