Alignment issues with CSS3 transform scale

Question

Im trying to use css3 scale property, but im facing issues with alignment of preceding elements

I see lots of spacing created after an element is scaled using css3.

Trying to place an images and titles beside it for a list. But when image is scaled the tile is pushed down. don't want to use absolute as it may give bad impact in different devices and page re-size

Here is the fiddle http://jsfiddle.net/sonymax46/xhwcvmj8

Also can you elaborate why this is happening

Can some one help me out.

Answer 1

Instead of scale through the transform property, adapt the width and height of the element to the desire size. If you don't do so, the element is going to keep the original size, resulting in that blank space.

Then you can set correctly the image size using this CSS:

background-size: contain;
background-repeat: no-repeat;

Here you have your jsfiddle updated.