How to write transition for a div with background image and no fix width and height?

I have a page where images are displayed in div with background image.

<div class="my-wrapper"> <div class="col-md-6 my-thumbnail" style="background-image:url('<?php the_post_thumbnail_url(); ?>'); background-position: center center;"> <a href="<?php the_permalink(); ?>"> <div class="overlay"> <h3><?php the_title(); ?></h3> <h2>Tag</h2> <span href="#" class="button">My Work</span> </div> </a> </div> </div>

CSS for this is

.my-thumbnail { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: transform 1s; -o-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s;
}
.my-thumbnail:hover { -moz-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); -moz-transition: transform 1s; -o-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s;
}
.my-wrapper { position: relative; overflow: hidden; display: inline;
}

The images don't have the fixed size so to the wrapper div and div with background as there will be two images in each row depending on the screen size. So I can't give fixed width and height to the wrapper div and div with background image.

With the above code, while hovering on the div images goes zoomed out and that overlaps other images around it.

Is there a way I can make this work so that image doesn't overlap other images.

Thanks in advance