JSFiddle - React, Tailwind, and code Playground

HTML

<div id="forumGroup" style="border: 1px solid #000000; box-shadow: 3px 3px 5px #999; border-radius: 10px; margin: 5px; display: block; width: 250px; height: 250px; padding: 10px; float: left; 							 								position: relative; text-align: center; display: block;">
<div class="mainGroupImage">
<img src="http://placehold.it/250x250" style="width: 250px; height: 250px;" />
</div>
</div>

CSS

.mainGroupImage{
	max-width: 100%;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.mainGroupImage:hover{
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}